当前位置：首页 > 前端教程

elementui选中

2026-01-13 21:57:12前端教程

选中状态的基本用法

在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属性指定某行是否可选。例如禁止选中某些条件的数据：

elementui选中

<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>