Vue中el-tableb表格高亮、取消高亮、表格多选、表格分页多选、禁用某行、选择当前行

原创

已于 2022-06-06 17:56:15 修改 · 3.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

于 2022-06-02 16:22:12 首次发布

本文介绍了如何在Vue.js项目中使用ElementUI实现表格行的高亮显示、取消高亮、多选功能，包括分页多选的设置。通过`highlight-current-row`属性实现高亮，`current-change`事件监听当前行变化，`setCurrentRow()`方法取消高亮。同时，文章还讨论了在父子组件间如何清空表格选中状态，以及利用`row-key`、`selection-change`、`reserve-selection`和`selectable`属性进行多选和分页多选的配置。

表格选中高亮：highlight-current-row

 <el-table
    ref="l_table"
    highlight-current-row
    :key="tableKey"
    v-loading="tableLoading"
    :data="tableData"
    border
    style="width: 100%"
    height="100%"
    :max-height="maxHeight"
    :hea