selectable elementui

使 ElementUI 组件可选中

ElementUI 默认情况下没有直接提供 selectable 功能的组件，但可以通过以下方法实现可选中效果。

使用 el-checkbox 实现单个选中

通过 el-checkbox 组件可以实现单个元素的可选中效果。

<template>
  <el-checkbox v-model="checked">选项</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

使用 el-checkbox-group 实现多选

对于多个可选项，可以使用 el-checkbox-group 组件。

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

<script>
export default {
  data() {
    return {
      checkedList: []
    }
  }
}
</script>

自定义表格行选中

在 el-table 中实现行选中功能。

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

使用 CSS 自定义选中样式

可以通过 CSS 自定义选中元素的外观。

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409EFF;
}

动态控制选中状态

通过编程方式控制元素的选中状态。

// 设置单个复选框选中
this.checked = true;

// 设置多选组选中值
this.checkedList = ['选项A', '选项B'];

// 设置表格行选中
this.$refs.multipleTable.toggleRowSelection(row, true);

这些方法可以灵活组合使用，根据具体需求实现各种可选中效果。