编辑列的功能
//列信息中配置：
scopedSlots: { customRender: 'editname' }
//
<template slot="editname" slot-scope="text, record">
<editable-cell :col="'name'" :record="record" @change="handleEditname(record, 'name', $event)"/>
</template>
//模板&方法
const EditableCell = {
props: {
record: Object,
col: String
},
data () {
return {
editable: false,
inputtext: ""
};
},
methods: {
handleChange (e) {
const value = e.target.value;
this.record[this.col] = value
},
check () {
this.editable = false;
this.$emit('change', this.record[this.col]);
},
edit () {
this.editable = true
this.inputtext = this.record[this.col]
},
close () {
this.editable = false
this.record[this.col] = this.inputtext
}
},
render () {
if (this.editable) {
return (
<div class="editable-cell">
<div class="editable-cell-input-wrapper">
<a-input value={this.record[this.col]} {...{ on: { pressEnter: this.check, change: this.handleChange } }} />
<a-icon type="check" class="editable-cell-icon-check" {...{ on: { click: this.check } }} />
<a-icon type="close" style="margin-left:8px;" {...{ on: { click: this.close } }} />
</div>
</div>
)
} else {
return (
<div class="editable-cell">
<div class="editable-cell-text-wrapper">
{this.record[this.col] || ''}
<a-icon type="edit" class="editable-cell-icon" {...{ on: { click: this.edit } }} />
</div>
</div>
)
}
}
};
//方法
handleEditname (record, dataIndex, value) {}vxe全局更新数据
VXETable.setup({
grid: {
proxyConfig:{
afterQuery:(row)=>{
// updateData
let data= row.$grid.tableData;
data.map(item=>{
for(let key in item){
if(typeof (item[key]) == 'string'){
if(item[key].includes('cmd')&&item[key].includes('calc')){
item[key] = item[key].replace('cmd',"'cmd'").replace('calc',"'calc'")
}
item[key] = item[key].replace(/\+/g,'＋').replace(/\-/g,'－').replace(/\=/g,'＝').replace(/\@/g,'＠')
}
}
})
row.$grid.updateData(data)
}
}
}
})
