подсвечивать, когда в таблице строк элементов установлен флажок в vuejs

Question

Я использовал код из vue typescript admin и element-ui, и буду использовать атрибут highlight-current-row после того, как я установлю флажок в таблице элементов. когда код highlight-current-row добавить таблицу атрибутов, работать в режиме одиночного выбора. но при добавлении множественного выбора для флажка это не функция

, как выделить после флажка флажка в таблице элементов строки в vueJS? В библиотеке не нашел

https://element.eleme.io/# / en-US / component / table # single-select

https://element.eleme.io/# / en -US / component / table # множественный выбор

спасибо перед

Answer 1

Используйте: row-class-name вместе со ссылкой на таблицу, чтобы увидеть, какие элементы выбраны.

<el-table :data="tableData" style="width: 100%" :row-class-name="rowClassName" ref="tab">
    <el-table-column  type="selection"  width="55"></el-table-column>
    <el-table-column prop="date" label="date" width="120"></el-table-column>
    <el-table-column prop="name" label="name" width="120"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>

JS:

data() {
  return {
    tableData: [
        { id: 1, date: '2020-07-01', name: 'Bob', address: 'Florida' }, 
        { id: 2, date: '2020-05-04', name: 'Alice', address: 'Arizona' }, 
        { id: 3, date: '2020-08-01', name: 'Carole', address: 'Calefornia' }]
  }
}
methods: {
  rowClassName({row, rowIndex}) {
    return this.$refs.tab.selection.find(element => element.id == row.id)
      ? 'selected-row'
      : ''
    }
  }

https://codepen.io/reijnemans/pen/dyYeBGG

Answer 2

Вот код, который делает именно то, что вы хотите: https://codepen.io/Andugal/pen/oNjqGWN

Он использует :row-class-name из Таблица со статусом в element-ui do c. И послушайте событие select.