elementui选中
选中状态的基本用法
在Element UI中，选中状态通常通过v-model绑定数据实现。例如表格的多选功能，使用el-table组件配合type="selection"的列定义，结合v-model绑定选中的行数据数组。
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>export default {
data() {
return {
tableData: [{ name: 'Item 1' }, { name: 'Item 2' }],
selectedRows: []
};
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val;
}
}
};单选与多选控制
- 多选：默认启用，通过
selection-change事件获取所有选中行。 - 单选：设置
highlight-current-row属性为true，通过current-change事件监听当前选中行。
<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
<!-- 列定义 -->
</el-table>默认选中项
通过reserve-selection属性或编程方式设置初始选中状态。例如表格中默认选中某些行：
this.$nextTick(() => {
this.tableData.forEach((row, index) => {
if (index === 0) {
this.$refs.table.toggleRowSelection(row, true);
}
});
});自定义选中逻辑
覆盖默认行为时，可使用selectable属性指定某行是否可选。例如禁止选中某些条件的数据：
<el-table-column type="selection" :selectable="checkSelectable"></el-table-column>methods: {
checkSelectable(row, index) {
return row.status !== 'disabled';
}
}其他组件的选中状态
- 下拉选择（Select）：通过
v-model绑定选中的值，支持多选时设置multiple属性。 - 复选框（Checkbox）：绑定布尔值或数组（多选组）。
- 单选框（Radio）：绑定单一值，通过
v-model与label属性匹配。
<el-select v-model="selectedOption" multiple>
<el-option label="Option 1" value="1"></el-option>
</el-select>
<el-checkbox-group v-model="checkedList">
<el-checkbox label="A"></el-checkbox>
</el-checkbox-group>注意事项
- 动态数据更新后，需调用
doLayout或clearSelection等方法刷新选中状态。 - 跨页多选需结合
row-key和reserve-selection属性保持选中状态。
