vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题

在做一个数据表格合并并且涉及到某些地方需要有输入框的操作

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输入框输入值之后,移开输入框之后只没有发生改变 当时代码是这么写的 发现这两行写法都不行。 思索了一下。。。

vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题_第1张图片

 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
    },

你可能感兴趣的:(vue.js,javascript,前端)