【Vue】iview中表格中自定义列，render函数如何双向绑定一个输入框

Z时代
2024-01-10
分类：技术分享

我是这么写的

绑定是单向的，即在

on: {
input: val => {
params.row.cnName = val
}}

这一步没有绑定回去

回答

我这测试并没有问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <i-table border :columns="columns7" :data="data6"></i-table>
    <i-button @click="handleUpdate">修改</i-button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            columns7: [
                {
                    title: '标题',
                    key: 'a',
                },
                {
                    title: '自定义',
                    key: 'render',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                value: params.row.a
                            },
                            on: {
                                input: (val) => {
                                    params.row.a = val;
                                }
                            }
                        })
                    }
                }
            ],
            data6: [
                {
                    a: '123'
                }
            ]
        },
        methods: {
            handleUpdate () {
                this.data6 = [
                    {
                        a: '234'
                    }
                ]
            }
        }
    })
  </script>
</body></html>

这是我刚想到的方法，我也是网上找了半天没找到答案，然后灵机一动，就想到了哈哈哈哈。
~~注意看我加粗部分。~~ 注意看 //!!!!!!!!!!!!!!

data() {
    const _this = this //!!!!!!!!!!!!!!!!!
    return {
      columns1: [
          {
              title: '序号',
              key: 'index'
          },
          {
              title: '进程名',
              key: 'name'
          },
          {
              title: '到达时间',
              key: 'arrival-time',
              render(h, params) {
                return h('div', [
                  h('InputNumber', {
                    props: {
                      value: params.row['arrival-time']
                    },
                    on: {
                      input(value) {
                        params.row['arrival-time'] = value
                        _this.data1[params.index]['arrival-time'] = value //!!!!!!!!!!!!!!!!!!!
                      }
                    }
                  })
                ])
              }
          },
          {
              title: '服务时间',
              key: 'service-time',
              render(h, params) {
                return h('div', [
                  h('InputNumber', {
                    props: {
                      value: params.row['service-time']
                    },
                    on: {
                      input(value) {
                        params.row['service-time'] = value
                        _this.data1[params.index]['service-time'] = value //!!!!!!!!!!!!
                      }
                    }
                  })
                ])
              }
          },
          {
            title: '操作',
            key: 'handle',
            render(h, params) {
              return h('div', [
                h('Button', {
                  on: {
                    click(a) {
                      // TODO
                    }
                  },
                  props: {
                    type: 'error',
                    ghost: true
                  }
                }, '删除')
              ])
            }
          }
      ],
      data1: [
          {
              index: 1,
              name: '进程1',
              'arrival-time': 0,
              'service-time': 4
          },
          {
              index: 2,
              name: '进程2',
              'arrival-time': 2,
              'service-time': 3
          },
      ]
    }  },