Ant design vue中的表格
1.表格表头重写① 首先在column配置的时候,不要写title!!!② 其次在column中,加入slots: { title: 'customTitle' },其中 customTitle可以为任意名称③ 最后在代码中加入如下代码:// slot的值与slots: { title: 'customTitle' }的title值保持一致<template slot="customTitl
·
1.表格表头重写
① 首先在column配置的时候,不要写title!!!
② 其次在column中,加入slots: { title: 'customTitle' }
,其中 customTitle
可以为任意名称
③ 最后在代码中加入如下代码:
// slot的值与slots: { title: 'customTitle' }的title值保持一致
<template slot="customTitle">
表头名称
<a-icon type="smile-o" /> // 自定义
</template>
2.表格排序将 取消排序 删除
// column配置
sortDirections: ['descend', 'ascend', 'descend']**
3.表格清空所有的排序
// Dom
<a-table
:columns="columns"
@change="handleChangeSort"
/>
// Data
computed: {
columns() {
let { sortedInfo } = this;
sortedInfo = sortedInfo || {};
const columns = [
{
key: 'a',
dataIndex: 'a',
title: '行业相关性',
sorter: true,
sortDirections: ['descend', 'ascend'],
sortOrder: sortedInfo.columnKey === 'a' && sortedInfo.order // 主要加这个
},
{
key: 'b',
dataIndex: 'superStock',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'b' },
sorter: true,
sortDirections: ['descend', 'ascend'],
sortOrder: sortedInfo.columnKey === 'b' && sortedInfo.order // 主要加这个
}]
return columns;
},
},
data () {
return {
sortedInfo: null
}
},
methods: {
handleChangeSort (pagination, _, sorter) {
this.sortedInfo = sorter // 主要是这句话
}
}
// 最后在点击清除的事件中,写入 this.sortedInfo = null
// 例如,tab切换的时候,change事件中写入 this.sortedInfo = null
4.表格动态渲染+操作自定义:
// DOM
<a-table
:columns="columns"
:data-source="tableData"
:pagination="false"
:scroll="{ x:0, y: 222 }"
>
<template #name="{ text }">{{ text.first }} {{ text.last }}</template>
<template #bodyCell="{ column,record }">
<template v-if="column.key === 'opt'">
<div style="display: flex;flex-wrap: nowrap;">
<div class="text">按钮1</div>
<div class="text">按钮2</div>
<div class="text">按钮3</div>
<div class="text">按钮4</div>
<div class="text">按钮5</div>
</div>
</template>
</template>
</a-table>
// Data
let tableData = [{
name: '111'
},{
name: '222'
}]
let columns = [{
title: '名称',
dataIndex: 'name',
key: 'name',
ellipsis: true
}, {
title: '操作',
dataIndex: 'opt',
key: 'opt'
}]
5.表格中自定义页码(版本 3.3.0):
<a-pagination
class="pagination"
show-size-changer
v-model:current="pageCurrent"
v-model:pageSize="pageSize"
:total="count"
@showSizeChange="onShowSizeChange"
@change="handlePageChange"
>
<template #buildOptionText="props">
<span>{{ props.value }}条/页</span>
</template>
</a-pagination>
更多推荐
已为社区贡献6条内容
所有评论(0)