vue页面存在两个相同元素设置失效问题

项目场景：

在项目中有这样一个需求，在一个页面中会展示审核通过数据和待审核的数据。通过Tabs标签页进行数据切换，列表中都有复选框，需要在待审核的数据中禁用某些复选框。

问题描述

在代码中复选框通过设置列的 type=“selection”，在通过selectable方法把数据为2016-05-02的复选框设置为不可勾选，具体代码如下：

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="审核通过数据" name="first">审核通过数据</el-tab-pane>
    <el-tab-pane label="未审核数据" name="second">未审核数据</el-tab-pane>
  </el-tabs>
  <div v-if="activeName=='first'">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="selection" width="50"  fixed></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
    <div v-if="activeName=='second'">
    <el-table
      :data="tableData"
      style="width: 100%">
       <el-table-column type="selection" width="50" :selectable="selectInit" fixed></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
 <script>
    export default {
      data() {
        return {
            activeName: 'first',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
               
      },
         methods: {
            //复选框操作
            selectInit(row,index){
                if(row.date=='2016-05-02'){
                    return false  //不可勾选
                }else{    
                    return true  //可勾选
                }
            }
       }
    }
  </script>

---

运行效果如下，发现设置并没有起作用

原因分析：

通过查询vue官网得知Vue 为了尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。

解决方案：

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。所以上面的代码我们只需要在复选框的元素上面加上key即可解决，如下：

<el-table-column type=“selection” width=“50” key=“sel1” fixed>
<el-table-column type=“selection” width=“50” key=‘sel2’ :selectable=“selectInit” fixed>
加上key后发现问题成功解决