Iview 表格 改变选中行数据 表格数据改变 选中数据不改变 解决办法 双向绑定

 

<template>
  <div>
    <Table
      border
      stripe
      height="350"
      ref="selection"
      :columns="columns"
      :data="data"
      @on-selection-change="updateData">
      <template slot-scope="{ row, index }" slot="employee">
        <div v-for="(item,i) in row.employeeList" :key="i">
          <checkbox v-model="item.checked" @on-change="checkboxChange(item,row,index)">
            <!--<checkbox v-model="item.checked" @on-change="checkboxChange(item.checked,i,index)">-->
            {{item.name}}
          </checkbox>
        </div>
      </template>
    </Table>
    <Button @click="getcheckedData()">点击获取选中数据</Button>
    <p>{{JSON.stringify(this.selectData)}}</p>

  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        data: [
          {
            serialNo: '01', name: 'migzi', quantity: 1,
            employeeList: [{id: 1, name: '米娜1', checked: true}, {id: 2, name: '米娜22', checked: true}]
          },
          {
            serialNo: '02', name: 'migzi02', quantity: 2,
            employeeList: [{id: 1, name: '米娜1', checked: true}, {id: 2, name: '米娜22', checked: true}]
          },
        ],
        columns: [{
          type: 'selection',
          width: 60,
          align: 'center'
        }, {
          title: '货品编号',
          key: 'serialNo'
        }, {
          title: '货品名称',
          key: 'name'
        }, {
          title: '数量',
          key: 'quantity',
          // slot: 'employee',
          render: (h, params) => {
            return h('div', [
              h('InputNumber', {
                props: {
                  min: 0,
                  value: params.row.quantity
                },
                on: {
                  // 编辑数量的时候,触发的事件
                  'on-change': e => {
                    params.row.quantity = e
                    this.data[params.index] = params.row;
                    this.selectData.forEach((v,index) => { // 先循环选中的值,找到id,与所有data里的id进行比对
                      if(v.serialNo == params.row.serialNo){
                        this.selectData.splice(index,1,params.row);
                      }
                    });
//                    this.updateData(this.data) // 改变的时候触发一下改变数据时事件,这样只要编辑了就会获取里面的值
                  }
                }
              })
            ])
          }
        },
          {
            title: 'employee',
            slot:
              'employee',
          }],
        selectData:[],
      }
    },
    methods: {
      checkboxChange(item,row,index) {
        console.log('item值')
        console.log(item)
        console.log('row值')
        console.log(row)
        this.data[index] = row
        console.log( this.data[index]);
        console.log('date值')
        console.log(this.data);
        console.log('选中date')
        console.log(this.selectData)
        // 选中的数据和 修改的row数据 对比 赋值同步;

        this.selectData.forEach((v,index) => { // 先循环选中的值,找到id,与所有data里的id进行比对
          if(v.serialNo == row.serialNo){
            this.selectData.splice(index,1,row);
          }
        });
        console.log('匹配复制后的 selectData');
        console.log(this.selectData)

      },

      // 更新选中的数据
      updateData(val) {
        console.log(val);
        this.selectData = val;
        console.log('选中date')
        console.log(this.selectData)

      },
      getcheckedData(){
        console.log('点击按钮最后的选中date');
        console.log(this.selectData);
      }
    },
    created: function () {
    }
  }
</script>

<style scoped>

</style>

 

代码演示链接【如果没有效果，可直接用上面代码复制粘贴运行看效果】：

https://run.iviewui.com/8NNVisgQ