在 vuejs 中选中项目行表复选框时突出显示答案

【问题标题】：give highlights when item row table checked checkbox in vuejs在 vuejs 中选中项目行表复选框时突出显示
【发布时间】：2020-08-23 20:01:20
【问题描述】：

我使用了来自 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#multiple-select

感谢之前

【问题讨论】：

如果我正确理解了您的问题，您想突出显示多行吗？
是的，你完全正确
@BTL。 element-ui 不包含多行高亮显示。

标签： javascript typescript vue.js element-ui

【解决方案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

【讨论】：

为什么我在 refs 表中的选择不存在 @dreijntjens ？ image
el-table标签中添加ref属性了吗？
是的，我在el-table标签image中添加了ref属性@
这与你使用打字稿有关，也许你可以看看这个：stackoverflow.com/questions/46505813/…
这对我有用...return (<this>this.$refs.tab).selection.find(element => element.id == row.id) 谢谢@dreijntjens

【解决方案2】：

这是一个代码笔，它可以完全按照您的意愿行事：https://codepen.io/Andugal/pen/oNjqGWN

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

【讨论】：

感谢@BTL，它在我的代码中运行，但是当我想检查所有字段时选择全部不起作用。如何将 objects 应用于 select all 复选框字段？因为，在您的示例代码笔中，只使用反对，而不是选择 image