当项目行 table 在 vuejs 中选中复选框时突出显示

Question

我使用了来自 vue typescript admin 和 element-ui 的代码，并且在我选中复选框项目 table 后将使用属性 highlight-current-row。当代码 highlight-current-row 添加属性 table 时，在单个 select 中工作。但是当在复选框上添加多个 select 时，它不起作用

如何在 vueJS 中的行项目 table 中选中复选框后突出显示？我在图书馆没找到

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

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

之前感谢

Answer 1

这是一个完全按照你的要求做的代码笔：https://codepen.io/Andugal/pen/oNjqGWN

它在 element-ui 文档中使用 Table with status 中的 :row-class-name。并收听 select 事件。

Answer 2

使用：row-class-name 和对 table 的引用可以看到个项目被选中。

<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

当项目行 table 在 vuejs 中选中复选框时突出显示

give highlights when item row table checked checkbox in vuejs

javascript

typescript

vue.js

element-ui