Пользовательский интерфейс элемента vue.js привязывает логические данные к столбцу выбора - PullRequest
Новая
       6

Пользовательский интерфейс элемента vue.js привязывает логические данные к столбцу выбора

0 голосов
/ 24 декабря 2018

Как привязать логические данные к флажкам в столбце выбора, чтобы показать пользователю, выбрана ли строка или нет.

Вот ссылка 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
        }],

, необходимая для привязки значений ключа к первому столбцу таблицы.

1 Ответ

0 голосов
/ 24 декабря 2018

Если я правильно понял ваш вопрос, у вас есть свойство key в каждой строке ваших данных tableData3.Вы хотите показать пользователю, была ли выбрана строка или нет, в зависимости от того, key или true или false.

. Вы можете сделать это в методе mounted:

  1. Вы выбираете строки для переключения, удаляя ложные, используя метод массива filter.
  2. Эти строки можно переключать, используя метод toggleSelection 

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

Вот скрипка со связанным поведением.Надеюсь, это поможет вам.

...