element ui让表格的复选框根据指定的值来默认选中
时间: 2023-10-18 09:32:58 浏览: 103
vue+element UI实现树形表格带复选框的示例代码
可以使用 `default-selection` 属性来设置表格的默认选中数据。你可以在组件中使用 `default-selection` 属性来设置默认选中的行,该属性接受一个数组,数组中的元素是选中行的数据,例如:
```html
<template>
<el-table :data="tableData" v-model="selectedRows" :default-selection="defaultSelection">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', value: 1 },
{ name: 'Doe', value: 2 },
{ name: 'Jane', value: 3 }
],
selectedRows: [],
defaultSelection: [{ name: 'John', value: 1 }, { name: 'Jane', value: 3 }]
};
}
};
</script>
```
在上述代码中,我们在组件中使用 `default-selection` 属性来设置默认选中的行,即 John 和 Jane。注意,这里需要在 `data` 中定义一个 `defaultSelection` 数组来存储默认选中的数据,然后将其传递给 `default-selection` 属性。
另外,我们还需要使用 `v-model` 绑定 `selectedRows` 来获取选中的行数据。这样,当用户在表格中选择行时,`selectedRows` 中的数据会自动更新。
阅读全文