element-plus el-table表格默认选中某一行
warning:
这篇文章距离上次修改已过185天,其中的内容可能已经有所变动。
在Element Plus中,要设置表格默认选中某一行,可以使用el-table
的highlight-current-row
属性来启用高亮显示当前选中行,并使用:data
绑定的数据数组中每项的id
或者其他唯一标识来指定默认选中的行。
以下是一个简单的例子:
<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: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '张小刚',
address: '上海市普陀区金沙江路 1517 弄'
},
// ...更多数据
],
currentRowId: 1 // 默认选中id为1的行
};
},
methods: {
handleCurrentChange(val) {
this.currentRowId = val.id;
}
}
};
</script>
在这个例子中,highlight-current-row
属性使得当前选中的行高亮显示。:data
属性绑定了一个包含每行数据的数组,其中每个对象都有一个id
属性。currentRowId
用来存储默认选中行的id
。当表格的当前行改变时,handleCurrentChange
方法会被调用,并更新currentRowId
。
注意,这里的currentRowId
必须与数据数组中某个对象的id
匹配,以确保默认选中的行是正确的。
评论已关闭