Vue----Element UI 表格点击某一行完成选中事件或取消选中事件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求:点击表格的某一行,即可触发选中该行。
如同element table中组件提供了单选的支持,只需要配置highlight-current-row属性即可实现单选。如下图。但element仅提供了单选,那多选的情况如何实现呢?
多选点击效果如下:选中某一行后,相当于对应的checkbox被选中
实现如下:
界面:在表格上添加以下三个参数
<el-table
border
ref="serveTable"
:data="tableData"
@selection-change="handleSelectionChange"
@row-click="rowClick"
:row-style="rowStyle"
:row-class-name="rowClassName"
>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
<el-table-column prop="name" label="设备名" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="ip" label="终端IP" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="status" label="状态" show-overflow-tooltip :formatter="formatter_status" align="center"></el-table-column>
<el-table-column prop="model" label="设备型号" show-overflow-tooltip align="center"></el-table-column>
<el-table-column label="操作" align="center" width="150">
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-delete"
type="danger" plain
@click.native.stop="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
事件触发
<script>
methods: {
//表格选中事件
handleSelectionChange(val) {
this.multipleSelection = val;
},
rowStyle({row,rowIndex}) {
Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
value: rowIndex,
writable: true,
enumerable: false
})
},
//监听row-click事件,实现选中
rowClick(row, column, event) {
let refsElTable = this.$refs.serveTable; // 获取表格对象
let findRow = this.multipleSelection.find(c => c.rowIndex == row.rowIndex); //找到选中的行
if (findRow ) {
refsElTable.toggleRowSelection(row, false); //如过重复选中,则取消选中
return;
}
refsElTable.toggleRowSelection(row,true); // 实现选中行中选中事件
},
//实现选中高亮
rowClassName({ row, rowIndex }) {
let rowName = "",
findRow = this.multipleSelection.find(c => c.rowIndex === row.rowIndex);
if (findRow) {
rowName = "current-row ";
}
return rowName; //也可以再加上其他类名 如果有需求的话
},
}
</script>
最后最后,发现如果点击按钮,也会触发选中事件,此时可以使用按钮的冒泡事件。如下:
参考文章:https://juejin.im/post/5d5030e4e51d4561e224a2fb 更多功能可查看该文章。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)