vue+elementUI项目中,有一个el-table-column的type为selection,请问如何设置其默认选择第一行数据
时间: 2023-06-04 20:02:38 浏览: 928
element-ui中的select下拉列表设置默认值方法
您可以通过设置 el-table 的 v-model 属性以及 el-table-column 的 prop 属性来实现默认选择第一行数据。具体而言,您可以在 el-table 的数据源中设置一个选中的数据对象,用来存储默认选中的数据。然后在 el-table-column 的 selection 配置中使用该选中对象的 key 值来绑定到 el-table 的 v-model 上,从而实现默认选中第一行数据。代码示例如下:
```html
<template>
<el-table v-model="selectedData" :data="tableData" style="width: 100%">
<el-table-column type="selection" prop="id"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 24 }
],
selectedData: { id: 1 }
};
}
};
</script>
```
在上述例子中,我们通过在 data 中定义 selectedData 对象来存储默认选中的数据,其初始值为 { id: 1 } ,即默认选中 tableData 数组中的第一项数据。然后在 el-table-column 的 selection 属性中绑定 selectedData 对象的 id 值,这样 el-table 在渲染时就会默认选中 id 为 1 的数据行。
阅读全文