vue el-table 单机行选中高亮并获取行数据,再次单击取消行选中
在Vue中使用Element UI的<el-table>
组件时,可以通过highlight-current-row
属性来启用行高亮,并且使用@current-change
事件来获取行数据。下面是一个简单的例子:
<template>
<el-table
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '孙小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
handleCurrentChange(val) {
if (val) {
console.log('选中的行数据:', val);
} else {
console.log('取消选中');
}
}
}
};
</script>
在这个例子中,highlight-current-row
属性使得当前选中的行有高亮效果。@current-change
事件在选中的行数据发生变化时触发,并且会将新选中的行数据作为参数传递给handleCurrentChange
方法。如果用户取消选中,则传递给方法的参数为null
。
评论已关闭