vue.js元素ui將布爾數據綁定到選擇列

Question

如何將布爾數據綁定到選擇列中的復選框以向用戶顯示是否選擇了該行。

這是JSFiddle鏈接：

JSFiddle鏈接

表：

 <el-table ref="multipleTable" :data="tableData3" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"  property="key">
</el-table-column>
<el-table-column label="Date" width="120">
  <template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="120">
</el-table-column>
<el-table-column property="address" label="Address" show-overflow-tooltip>
</el-table-column>

tableData3: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:false
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',          
          key:true
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }],

需要將鍵值綁定到表的第一列。

Answer 1

如果我很了解您的問題，那么tableData3數據的每一行中都有一個key屬性。 您想向用戶顯示是否選擇了該行，具體取決於key是true還是false 。

您可以在mounted方法中執行以下操作：

1. 您可以通過使用數組的filter方法刪除錯誤的行來選擇要切換的行。
2. 您可以使用toggleSelection方法切換這些行

 mounted() { const rowsToToggle = this.tableData3.filter(row => row.key) this.toggleSelection(rowsToToggle) } 

這是帶有相關行為的小提琴 。 希望對您有幫助。