elementui选中

选中状态的实现方法

在Element UI中实现选中状态可以通过多种组件完成，例如表格、复选框、单选框或下拉选择框。以下是常见场景的实现方式：

表格选中行 使用el-table组件的highlight-current-row属性可高亮当前选中行：

<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
  <el-table-column prop="date" label="日期"></el-table-column>
</el-table>

handleCurrentChange方法会返回当前选中行的数据对象。

复选框选中 使用el-checkbox或el-checkbox-group实现多选：

<el-checkbox v-model="checked">选项</el-checkbox>
<el-checkbox-group v-model="checkedList">
  <el-checkbox label="选项A"></el-checkbox>
</el-checkbox-group>

单选框选中 使用el-radio或el-radio-group实现单选：

<el-radio v-model="radio" label="1">选项</el-radio>
<el-radio-group v-model="radioGroup">
  <el-radio label="A"></el-radio>
</el-radio-group>

下拉选择框选中 el-select组件通过v-model绑定选中的值：

<el-select v-model="selectedValue">
  <el-option label="选项1" value="1"></el-option>
</el-select>

样式自定义方法

若需修改选中状态的默认样式，可通过覆盖CSS实现：

/* 表格选中行 */
.el-table__body tr.current-row>td {
  background-color: #f0f9eb;
}

/* 复选框选中 */
.el-checkbox.is-checked .el-checkbox__inner {
  background-color: #ff6600;
}

状态管理技巧

对于复杂交互场景，建议结合Vuex管理选中状态：

// store中定义状态
state: {
  selectedItems: []
},
mutations: {
  setSelectedItems(state, items) {
    state.selectedItems = items
  }
}

在组件中通过计算属性或方法同步状态，确保选中状态在多个组件间保持一致。