Ant-Design-Vue中关于Table组件的使用
Posted li9club
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ant-Design-Vue中关于Table组件的使用相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="./antdesignvue1410/antd.min.css"/> <!-- vue 版本需要注意，不是每一个版本都起作用的 --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="./antdesignvue1410/antd.min.js"></script> <!-- 引入 moment.min.js --> <script src="./antdesignvue1410/moment.min.js"></script> </head> <body> <div id="app"> <template> <a-table :columns="columns" :data-source="dataSource"> <!--用v-for遍历模板，直接渲染三个插槽--> <template v-for="(col,i) in [‘age‘,‘name‘, ‘address‘]" :slot="col" slot-scope="text, record, index" > <div :key="col"> <a v-if="record.editable==false" >{{text}}</a> <!--如果record.editable为true，则展示input框，可以修改数据，为false则直接展示数据 --> <a-input v-if="record.editable" style="margin: 0px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col)" /> </div> </template> <template slot="operation" slot-scope="text, record"> <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="() => onDelete(record.key)"> <a href="javascript:;">Delete</a> </a-popconfirm> <a-popconfirm v-if="dataSource.length" title="Sure to handleAdd?" @confirm="() => handleAdd()"> <a href="javascript:;">add</a> </a-popconfirm> <span > <a @click="() => edit(record.key)">Edit</a> <a @click="() => save(record.key)">Save</a> </span> </template> </a-table> </template> </div> </body> <script> var columns =[ {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‘ }} ]; var data = []; for (let i = 0; i < 15; i++) { data.push({ key: i.toString(), name: `Edrward ${i}`, age: 32, editable:false, address: `London Park no. ${i}`, }); }; var vue = new Vue({ data() { this.cacheData = data.map(item => ({ ...item })); //缓存所有数据 return { dataSource:data, columns:columns, count: 15, }; }, methods: { onCellChange (key, dataIndex, value) { // // console.log(key); console.log(dataIndex); console.log(value); const dataSource = [...this.dataSource] const target = dataSource.find(item => item.key === key) if (target) { target[dataIndex] = value this.dataSource = dataSource } }, /** * 修改完成之后点击保存的回调方法 * @param key 当前行对应的key值 */ save(key) { const newData = [...this.dataSource]; console.log(newData); const newCacheData = [...this.cacheData]; console.log(newCacheData); const target = newData.filter(item => key === item.key)[0]; const targetCache = newCacheData.filter(item => key === item.key)[0]; if (target && targetCache) { target.editable=false; // 删除editable属性 this.dataSource = newData; Object.assign( targetCache, target ); console.log(this.cacheData); console.log(newCacheData); this.cacheData = newCacheData; } }, /** * 点击操作栏中修改的回调方法 * @param key 当前行对应的key值 */ edit(key) { const newData = [...this.dataSource];// 直接获取了所有数据 const target1 = newData.filter(item => key === item.key)[0]; // 在筛选出key值相同的那一条数据 if (target1) { // 如果数据存在，则给这条数据新增一个属性为editable属性为true => 代表为正在更改中 target1.editable = true; this.dataSource = newData; } console.log(target1); }, /** * input的change的回调方法 * @param value input框中你输入的值 * @param key 当前行对应的key值 * @param column 当前列的dataIndex对应的名称，有[‘name‘,‘age‘,‘address‘] */ handleChange(value, key, column) { const newData = [...this.dataSource]; const target = newData.filter(item => key === item.key)[0]; console.log(column); if (target) { target[column] = value; this.dataSource = newData; } }, onDelete (key) { const dataSource = [...this.dataSource] this.dataSource = dataSource.filter(item => item.key !== key) }, handleAdd () { const { count, dataSource } = this const newData = { key: count, name: `Edward King ${count}`, age: 32, editable:false, address: `London, Park Lane no. ${count}`, } this.dataSource = [...dataSource, newData] this.count = count + 1 }, }, }).$mount(‘#app‘); </script> </html>
https://www.cnblogs.com/cirry/p/12459729.html
以上是关于Ant-Design-Vue中关于Table组件的使用的主要内容，如果未能解决你的问题，请参考以下文章