在做一個數(shù)據(jù)表格合并并且涉及到某些地方需要有輸入框的操作

1. 部分代碼 發(fā)現(xiàn)這樣寫 插槽的功能直接沒有了 
 {
          title: '權(quán)重',
          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 = <a-input v-model="row.sval" onChange={(e) => this.handleSval(e, row, index)} />
                } else {
                  svalInp = <span>{text}</span>
                }
                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 = <a-input v-model=“row.sval” onChange={(e) => this.handleSval(e, row, index)} />
把這塊代碼改一下 直接用value進行賦值
svalInp = <a-input value={row.sval} onChange={(e) => this.handleSval(e, row, index)} />

還有一個問題需要注意 customRender: (text, row, index)=>{ } 和 customRender: function(text, row, index){ } 他們是有區(qū)別的，
箭頭函數(shù) this 指向的是vue的實例對象，普通函數(shù)this是undefiend

3.在用value進行賦值之后頁面沒有問題，但是在input輸入框輸入值之后，移開輸入框之后只沒有發(fā)生改變 當時代碼是這么寫的 發(fā)現(xiàn)這兩行寫法都不行。 思索了一下。。。

 handleSval(e, record, index) {
      this.descriptionsList.detailList[index].sval = e.target.value
      this.$set(this.descriptionsList.detailList[index], 'sval', e.target.value)
    },

4.后面還了一種寫法 這樣就OK了文章來源地址http://www.zghlxwxcb.cn/news/detail-602672.html

 handleSval(e, record, index) {
      const data = JSON.parse(JSON.stringify(this.descriptionsList))
      data.detailList[index].sval = e.target.value
      this.descriptionsList = data
    },

到了這里，關(guān)于vue里面customRender 和 scopedSlots如何同時使用以及遇到的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！