.1 概述
1.1 功能
- vue-element table的可编辑列实现，参考NG-ZORRO的demo示例，✨地址
- 支持
Table多列修改，只需一个Row-Data自定义属性self-edit，HTML 代码简洁
1.2 一些坑
🐪 Vue 不能检测数组和对象的变化
- 为实现多列修改，同时不额外引入多个变量，通过一自定义的
row[self-edit],在后台服务器拿到table-data时， 遍历所有row,引入该对象，🐑要先做完上述数据初始化后，再赋值给table-data变量🐑，因为table-data变量一旦init后，对象的增加、删除、修改无法被vue2监听到 - 除了
事先init上述方式外，也可以通过使用this.$set(object, key, value)（vue 无法监听 this.$set 修改原有属性）, isEdit(scope) 代码方法 便用到了
🐪 element-table 的v-show功能失效问题
- 由于这里关联一个方法，修改了判断变量后，element 并没有生效，这里通过
this.$refs.multipleTable.doLayout()显式触发的，multipleTable是el-table 的ref标签.
🐪 JS的对象删除
- 这里尝试通过
动态对象解构实现的，✨荐文 - 对象属性是否存在，isEdit(scope) 代码方法
.2 Html
<!------ ↓ ↓ table-可编辑列-customer-FCST ID ↓ ↓ ------>
<el-table-column prop="customer" label="FCST ID" width="120" >
<template slot-scope="scope">
<span :title="getColTitle(scope)" v-show="!isEdit(scope)" class="scspan-width"
@dblclick="inEdit(scope)">{{ getColTitle(scope) }}<i class="el-icon-edit"></i></span>
<el-input v-model="scope.row['self-edit'][scope.column.property]" v-show="isEdit(scope)"
:placeholder="coledit4place(scope)" @blur="coledit4bur(scope)">
<i :class="coledit4iconstyle(scope)" slot="suffix" @click="handleIconClick(scope)"> </i>
</el-input>
</template>
</el-table-column>
<!------ ↑ ↑ table-可编辑列-customer-FCST ID ↑ ↑ ------>
这里利用了
vue-插槽机制自定义列布局， 正常模式的span 和 编辑模式的input两个组件, 用户点击Span块时，进入编辑模式，编辑完后点击图标确认。
.3 CSS
.scspan-width {
display: -moz-inline-box;
display: inline-block;
min-width: 90px;
min-height: 20px;
cursor: pointer;
}
.ico-hide {
display: none;
}
.g-hand {
cursor: pointer;
}
.4 JS
//============== ↓ ↓ 可编辑table-列 方法集 ↓ ↓ ================================
//进入编辑模式
inEdit(scope) {
console.log("index", scope.$index, scope)
let row = scope.row
let label = scope.column.property;
let editval = row['self-edit'];
// editval[label] = row[label]
this.$set(editval, label, row[label])
this.$refs.multipleTable.doLayout()
},
//判断当前是否编辑模式
isEdit(scope) {
let row = scope.row;
let label = scope.column.property;
let editval = row['self-edit'];
let isshow = label in editval;
return isshow;
},
//span的内容
getColTitle(scope) {
let row = scope.row;
let label = scope.column.property;
return row[label];
},
//编辑图标的样式，当文本发生变化时便展示
coledit4iconstyle(scope) {
let row = scope.row;
let label = scope.column.property;
let edval = row['self-edit'][label];
let oldval = row[label]
if (edval != oldval) {
return "el-icon-edit el-input__icon g-hand ";
}
return "el-icon-edit el-input__icon g-hand ico-hide";
},
//编辑input的占位文本
coledit4place(scope) {
let row = scope.row;
let label = scope.column.property;
return row['self-edit'][label];
},
//编辑input失去焦点时，不修改，退出编辑模式，恢复正常展示
coledit4bur(scope) {
console.log("失去焦点", scope)
setTimeout(() => {
let row = scope.row;
let label = scope.column.property;
console.log("blur的self", JSON.stringify(row['self-edit']))
if (!(label in row['self-edit'])) {
console.log("已不再，无需处理")
return;
}
let { [label]: name, ...rest } = row['self-edit']
this.$set(scope.row, 'self-edit', rest)
this.$refs.multipleTable.doLayout()
}, 200);
},
//编辑图标点击修改，这里需调用backend-api
handleIconClick(scope) {
console.log("点击图标", scope)
let row = scope.row;
let label = scope.column.property;
//修改值
let edval = row['self-edit'][label];
row[label] = edval
this.net4updateCol(scope)
//动态解构对象，删除对象特定属性，相比delete 性能更高
let { [label]: name, ...rest } = row['self-edit']
this.$set(scope.row, 'self-edit', rest)
this.$refs.multipleTable.doLayout()
},
//============== ↑ ↑ 可编辑table-列 方法集 ↑ ↑ ================================
// 表数据初始化的配置，添加一个自定义对象 self-edit
loadItemData() {
this.listLoading = true;
getInitCustomerDemand().then(response => {
let ct = response.payload.page.records
this.mappingMonth = response.payload.mappingMonth
for (let row of ct) {
row['self-edit'] = {};
}
//tabledata的初始化位置注意，一定要在自定义的新属性添加进去后，再初始化；
//不然Vue 不能检测数组和对象的变化
this.tableData = ct;
}),
}
网友评论