Ant Design Vue 表格行内编辑！！！ |
您所在的位置：网站首页 › vue行内编辑校验 › Ant Design Vue 表格行内编辑！！！ |
Ant Design Vue 表格行内编辑！！！
|
效果图
无图言叼，直接上图： 对于修改表格数据，比较主流的是通过模态框内嵌表单来修改。这样上手比较简单，验证功能很强大。如果通过表格行内编辑的话，上手稍微复杂一点，直接在列里面修改，会非常直观顺畅，但是有一定的缺陷，无法内嵌表单，验证起来比较不友好。 .Vue 数据模版DEMO 新增 批量发布 Lucy Jack {{text}} 保存 取消 编辑 import Mixin from './mixin' import Moment from 'moment' export default { name: "DataTemplateDemo", mixins: [Mixin], methods: { // 将时间字符串 转换 为 Moment momentDateStr(dateStr) { return Moment(dateStr) } } } Mixin import {clearReference} from '@/utils/utils' const data = [] for (let i = 0; i `总共 ${total} 条记录，当前第 ${range[0]}条至第${range[1]}条`, onChange: (page) => this.pageChange(page) }, // 表格loading tableLoading: false, // 表格选中key selectedRowKeys: [] } }, created() { // 此处模拟ajax，赋值（需清除引用） this.tableData = clearReference(data) this.cacheData = clearReference(data) }, methods: { // 分页事件 pageChange(page) { this.pagination.current = page }, // 表格选中事件 onSelectChange(selectedRowKeys) { console.log(selectedRowKeys); this.selectedRowKeys = selectedRowKeys; }, // 表格点击全选事件 onSelectAllChange(selected, selectedRows) { // 判断 全选并且第一行数据为新增 则不选中新增那一行 if (selected && selectedRows[0].key === 'newRow') { this.selectedRowKeys.splice(0, 1) } }, // 添加一行 addRow() { if (this.tableData.some(item => item.newRow === true)) return this.$message.info('请先编辑完毕后在再添加！'); // 新增时取消表格选中的key this.selectedRowKeys = [] this.tableData.unshift({ key: 'newRow', // newRow 表示该行是新增的，提交成功后 key替换为数据库ID newRow: true, //用来限制只能新增一行 a: this.$dateformat(new Date(), 'isoDate'), b: undefined, c: '', e: '', d: '', f: '', g: '', h: '', i: '', j: '', editable: true }) this.cacheData.unshift({ key: 'newRow', newRow: true, a: this.$dateformat(new Date(), 'isoDate'), b: undefined, c: '', e: '', d: '', f: '', g: '', h: '', i: '', j: '', editable: false }) }, // 编辑一行 edit(rowKey) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; // 根据rowKey判断该行数据是否存在 if (target) { target.editable = true; // 修改target可以直接影响到newData this.tableData = newData; } }, // 点击保存 save(rowKey) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; if (target) { delete target.editable; this.tableData = newData; this.cacheData = newData.map(item => ({...item})); } }, // 点击取消 cancel(rowKey) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; if (target) { // 将缓存数据中匹配到的数据对象覆盖合并当前被修改的行 Object.assign(target, this.cacheData.filter(item => rowKey === item.key)[0]); delete target.editable; this.tableData = newData; } }, // input 输入change handleChange(value, rowKey, colName) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; if (target) { target[colName] = value; this.tableData = newData; } }, // 日期框 change onChangeDate($event, rowKey, colName) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; if (target) { target[colName] = this.$dateformat($event, 'isoDate'); this.tableData = newData; } }, // select 框 change onChangeSelect($event, rowKey, colName) { const newData = [...this.tableData]; const target = newData.filter(item => rowKey === item.key)[0]; if (target) { target[colName] = $event; // 根据select框的值自动带出某个input的值 - 因为第三列列名为c $event === 'lucy' ? target.c = '根据lucy带出的值' : target.c = '根据jack带出的值' this.tableData = newData; } } } } export default Mixin 实现原理基于antV官方的一个 demo 加上自己一些新增的实现，具体实现在代码里面有非常详细的注释。无奈没有更多的时间去优化这篇长大粗的博文，目前只能简单粗暴的将demo代码粘上来。 补充对于文中的 clearReference 方法其实就是 JSON.parse(JSON.stringify(obj)) 补充于 2021年3月22日：this.$dateformat 是 https://www.npmjs.com/package/dateformat 插件 |
【本文地址】
今日新闻 |
推荐新闻 |