<el-table
:data="tableData"
@sort-change="handlesortChange"
@select="
(selection, row) => {
cleckedData(selection, row);
}
"
highlight-current-row
v-loading="loading"
:header-cell-style="{
textAlign: 'left',
color: '#222',
'font-family': 'Microsoft YaHei',
'font-size': '13px',
'font-weight': '400',
background: '#E1E3F0',
}"
:cell-style="{ fontSize: '13px', color: '#333' }"
style="width: 100%"
>
data部分:
data(){
cleckedDatas: [],
}
js部分:
cleckedData(selection, row) {
if (this.cleckedDatas.includes(row)) {
this.cleckedDatas.splice(this.cleckedDatas.indexOf(row), 1);
} else {
this.cleckedDatas.push(row);
}
console.log(this.cleckedDatas);
},
table勾选
最新推荐文章于 2023-08-25 17:09:59 发布
本文展示了如何在Vue应用中利用el-table组件实现数据排序(@sort-change)和行选择功能。通过@select事件处理选中和取消选中行,使用cleckedData方法动态管理选中项。代码示例中详细定义了表格样式和数据绑定,为前端开发人员提供了清晰的参考。
摘要由CSDN通过智能技术生成