Element table 表格实现单选

最新推荐文章于 2024-07-23 11:14:55 发布

阳光的男夹克

最新推荐文章于 2024-07-23 11:14:55 发布

阅读量1.4k

点赞数 2

分类专栏： Element 文章标签： elementui

本文链接：https://blog.csdn.net/weixin_44640323/article/details/120510400

版权

Element 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用Element UI库实现表格的单选和全选功能。通过监听`@select-all`和`@select`事件，结合`toggleRowSelection`方法，可以轻松控制表格行的选中状态。示例代码展示了如何在用户选择多行时取消最前面的一行选择，以及如何通过`clearSelection`方法取消所有选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建表格添加 @select-all=“selectAll” @select=“selectAnalysis” ref=“multipleTable”

<el-table @select-all="selectAll" ref="multipleTable" @select="selectAnalysis" v-loading="loadingAnalysis" style="margin-top: 10px"  height="350px" :data="analysisData" border stripe size="small" :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold',align:'center'}" highlight-current-row>
  <el-table-column fixed type="selection" width="55"></el-table-column>
</el-table>

实现单选

selectAnalysis(selection, row) {
  if (selection.length > 1) {
    let del_row = selection.shift();
    this.$refs.multipleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
},

取消取选

selectAll() {
	this.$refs.multipleTable.clearSelection()
},