vue中用table_Ant-Design-Vue中关于Table组件的使用

1. 如何自定义表格列头：

Name

const columns =[

{

dataIndex:'name',　　　　// 自定义列表头，则不能设置title属性align:'left',

slots: { title:'customTitle'}　　// 在这里定义一个slots属性，并设置一个title属性

}

]

页面将会渲染为如下：

2.如何设置自定义单行样式

// 这里传入的值分别是：record：当前行的原始数据，index：当前行的索引编辑

const columns =[

{

title:'菜单名称'dataIndex:'name',　　// dataIndex的值对应的是，列数据在数据项中对应的 keykey: 'name',　　　　　// 如果dataIndex属性值唯一，则可以不设置key属性

align:'left',

},

{

title:'操作',

key: 'action'

dataIndex:'action',

width:'30%',

scopedSlots: { customRender:'action' }, //这一行自定义渲染这一列

align: 'center'}

]

页面展示如下：

3.如何设置表头，页脚和边框线？

　　// 这里添加bordered属性，就可以添加上边框线

{{text}}

　　// slot="title"就可以设置页头了，'title'改为其他值则没有页头Header--{{currentPageData}}　　　　// 这里打印一下currentData，看下是啥值

Footer　　// 跟上同理

const columns =[　　// columns中并没有定义页头和页脚的相关代码

{

title:'Name',

dataIndex:'name',

scopedSlots: { customRender:'name'},

},

{

title:'Cash Assets',

className:'column-money',

dataIndex:'money',

},

{

title:'Address',

dataIndex:'address',

},

];

页面显示就结果如下：

4.表格如何树形展示数据：

:rowSelection="rowSelection">// rowSelection是列表可选择的时候的配置项，后面介绍，带有此选项表格前就会出现可选择的checkbox Name

编辑

const columns =[

{

dataIndex:'name',

key:'name',

align:'left',

slots: { title:'customTitle'}

},

{

title:'操作',

dataIndex:'action',

width:'30%',

scopedSlots: { customRender:'action'},

align:'center'}

]

const dataSource=[

{

key:1,

name:'John Brown sr.',

age:60,

address:'New York No. 1 Lake Park',

qq: [//这里我把子节点的key，改为qq了

{

key:11,

name:'John Brown',

age:42,

address:'New York No. 2 Lake Park'}

]

},

{

key:2,

name:'Joe Black',

age:32,

address:'Sidney No. 1 Lake Park'}

]

页面显示效果如下：(显示正确)

5.自定义筛选菜单：(下面的代码都太多了，有必要在点开看吧，有详细的注释)

slot="filterDropdown"slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"style="padding: 8px"

>

v-ant-ref="c => searchInput = c":placeholder="`Search ${column.dataIndex}`":value="selectedKeys[0]"@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"@pressEnter="() => handleSearch(selectedKeys, confirm)"style="width: 188px; margin-bottom: 8px; display: block;"

/>

type="primary"@click="() => handleSearch(selectedKeys, confirm)"icon="search"size="small"style="width: 90px; margin-right: 8px"

>Search

handleReset(clearFilters)" size="small" style="width: 90px"

>Reset

slot="filterIcon"slot-scope="filtered"type="search":style="{ color: filtered ? 'red' : undefined }"

/>

v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"

>

v-if="fragment.toLowerCase() === searchText.toLowerCase()":key="i"class="highlight"

>{{fragment}}

{{fragment}}

{{text}}

exportdefault{

data () {return{

data,

searchText:'',

searchInput:null,

columns: [

{

title:'Name',

dataIndex:'name',

key:'name',//这里的三个插槽，分别是搜索按钮插槽，定义搜索按钮样式插槽，和搜索之后的数据插槽

scopedSlots: {

filterDropdown:'filterDropdown',

filterIcon:'filterIcon',

customRender:'customRender'},//这里才是确定筛选的运行函数

onFilter: (value, record) =>record.name.toString().toLowerCase().includes(value.toLowerCase()),//自定义筛选菜单可见变化时调用

onFilterDropdownVisibleChange: visible =>{if(visible) {

setTimeout(()=>{this.searchInput.focus()

},0)

}

}

},{......}//省略了部分配置

]

}

},

methods: {

handleSearch (selectedKeys, confirm) {

confirm();//confirm会关闭搜索框

console.log(selectedKeys) //会打印出你在搜索框中输入的值

this.searchText = selectedKeys[0]

},

handleReset (clearFilters) {

clearFilters();//=> 这里面也有调用confirm方法关闭对话框

this.searchText = ''}

}

}

View Code

6.如何自定义可以编辑单行的表格？

v-for="col in ['name', 'age', 'address']":slot="col"slot-scope="text, record, index"

>

v-if="record.editable"style="margin: -5px 0":value="text"@change="e => handleChange(e.target.value, record.key, col)"

/>

{{text}}

save(record.key)">Save

cancel(record.key)">

Cancel

edit(record.key)">Edit

{title:'name',dataIndex: 'name',width: '25%',scopedSlots: { customRender: 'name'}},

{title:'age',dataIndex: 'age',width: '15%',scopedSlots: { customRender: 'age'}},

{title:'address',dataIndex: 'address',width: '40%',scopedSlots: { customRender: 'address'}},

{title:'operation',dataIndex: 'operation',scopedSlots: { customRender: 'operation'}}

];

const data=[];for (let i = 0; i < 100; i++) {

data.push({

key: i.toString(),

name: `Edrward ${i}`,

age:32,

address: `London Park no. ${i}`,

});

}

exportdefault{

data() {this.cacheData = data.map(item => ({ ...item })); //缓存所有数据

return{

data,

columns,

};

},

methods: {/**

* input的change的回调方法

* @param value input框中你输入的值

* @param key 当前行对应的key值

* @param column 当前列的dataIndex对应的名称，有['name','age','address']*/handleChange(value, key, column) {

const newData= [...this.data];

const target= newData.filter(item => key === item.key)[0];

console.log(column);if(target) {

target[column]=value;this.data =newData;

}

},/**

* 点击操作栏中修改的回调方法

* @param key 当前行对应的key值*/edit(key) {

const newData= [...this.data];//直接获取了所有数据

const target = newData.filter(item => key === item.key)[0]; //在筛选出key值相同的那一条数据

if (target) { //如果数据存在，则给这条数据新增一个属性为editable属性为true => 代表为正在更改中

target.editable = true;this.data =newData;

}

},/**

* 修改完成之后点击保存的回调方法

* @param key 当前行对应的key值*/save(key) {

const newData= [...this.data];

const newCacheData= [...this.cacheData];

const target= newData.filter(item => key === item.key)[0];

const targetCache= newCacheData.filter(item => key === item.key)[0];if (target &&targetCache) {delete target.editable; //删除editable属性

this.data =newData;

Object.assign(

targetCache,

target

);this.cacheData =newCacheData;

}

},/**

* 点击取消编辑的回调方法

* @param key 当前行对应的key值*/cancel(key) {

const newData= [...this.data];

const target= newData.filter(item => key === item.key)[0];if (target) { //将缓存的值重新复制给原先的数据，并删除editable属性

Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);deletetarget.editable;this.data =newData;

}

},

},

};

margin-right: 8px;

}

View Code

7.如何定义可展开的table？

Delete

{{index}}

{{record}}--{{index}}--{{indent}}--{{expanded}}

{ title:'Name', dataIndex: 'name', key: 'name'},

{ title:'Age', dataIndex: 'age', key: 'age'},

{ title:'Address', dataIndex: 'address', key: 'address'},

{ title:'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action'} },

];

const data=[

{

key:1,

name:'John Brown',

age:32,

address:'New York No. 1 Lake Park',

description:'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',

}

];

exportdefault{

data() {return{data,columns,};

},

};

View Code

8.最后来一个带分页的表格

{itle:'Name',dataIndex:'name'},

{title:'Age',dataIndex:'age'},

{title:'Address',dataIndex:'address'}

]

const data=[]for(let i= 0; i< 46; i++) {

data.push({

key: i,

name: `Edward King ${i}`,

age:32,

address: `London, Park Lane no. ${i}`

})

}

exportdefault{

data () {return{

data,

columns

ipagination: {

current:1,

pageSize:10,

total: data.length,

showSizeChanger:true,

showQuickJumper:true,

pageSizeOptions: ['10','20','30'],//这里注意只能是字符串，不能是数字

showTotal: (total, range)=>`显示${range[0]}-${range[1]}条，共有 ${total}条`

}

}

}

}

9.建议看官方组件案列中的，自定义选择项案例，看完弄懂，表格的基本使用没有问题了。大家使用的时候遇到了什么问题可以来沟通一下啊。。。