在做一个数据表格合并并且涉及到某些地方需要有输入框的操作
1. 部分代码 发现这样写 插槽的功能直接没有了
{
title: '权重',
align: 'center',
dataIndex: 'weight',
scopedSlots: { customRender: 'weight' },
customRender: (text, row, index) => {
const obj = { children: text, attrs: {} }
if (row.kpitype === '其他信息') {
obj.attrs.colSpan = 0
}
if (row.kpitype === '评价信息') {
obj.attrs.colSpan = 12
}
return obj
},
},
2.改了以后
{
title: '考核得分',
align: 'center',
children: [
{
title: '实际完成值',
align: 'center',
dataIndex: 'sval',
customRender: (text, row, index) => {
let svalInp
if (row.jstype === '定性指标') {
svalInp = this.handleSval(e, row, index)} />
} else {
svalInp = {text}
}
const obj = { children: svalInp, attrs: {} }
if (row.kpitype === '其他信息') {
obj.attrs.colSpan = 0
}
if (row.kpitype === '评价信息') {
obj.attrs.colSpan = 0
}
return obj
},
},
// 项目直接报错了,提示 You have to use JSX Expression inside your v-model
通过原生返回的标签里面不能写v-model进行双向绑定
svalInp = this.handleSval(e, row, index)} />
把这块代码改一下 直接用value进行赋值
svalInp = this.handleSval(e, row, index)} />
3.在用value进行赋值之后页面没有问题,但是在input输入框输入值之后,移开输入框之后只没有发生改变 当时代码是这么写的 发现这两行写法都不行。 思索了一下。。。
handleSval(e, record, index) {
this.descriptionsList.detailList[index].sval = e.target.value
this.$set(this.descriptionsList.detailList[index], 'sval', e.target.value)
},
4.后面还了一种写法 这样就OK了
handleSval(e, record, index) {
const data = JSON.parse(JSON.stringify(this.descriptionsList))
data.detailList[index].sval = e.target.value
this.descriptionsList = data
},