vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 = <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){ } 他们是有区别的，
箭头函数 this 指向的是vue的实例对象，普通函数this是undefiend

3.在用value进行赋值之后页面没有问题，但是在input输入框输入值之后，移开输入框之后只没有发生改变当时代码是这么写的发现这两行写法都不行。思索了一下。。。

vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题,vue.js,javascript,前端

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

4.后面还了一种写法这样就OK了文章来源地址https://www.toymoban.com/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
    },

到了这里，关于vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！