vue element ui多选组件

置顶 leijmdas

于 2025-08-03 12:19:53 发布

阅读量290

点赞数 17

CC 4.0 BY-SA版权

文章标签： vue.js ui elementui

本文链接：https://blog.csdn.net/leijmdas/article/details/149878912

Vue Element UI 多选组件使用指南

Element UI 提供了多种多选组件，适用于不同的多选场景。下面我将详细介绍这些组件的使用方法和常见应用场景。

1. Checkbox 多选框组

基本用法

vue

<template>
  <el-checkbox-group v-model="checkedItems">
    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedItems: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>

属性说明

属性	说明	类型	可选值	默认值
v-model	绑定值	Array	-	-
disabled	是否禁用	Boolean	-	false
min	可被勾选的最小数量	Number	-	-
max	可被勾选的最大数量	Number	-	-
size	尺寸	String	medium / small / mini	-

样式定制

css

/* 自定义多选框样式 */
.el-checkbox-group {
  margin: 10px 0;
}

.el-checkbox {
  margin-right: 15px;
}

2. Select 多选下拉框

基本用法

vue

<template>
  <el-select v-model="selectedItems" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>

高级功能

可搜索的多选

vue

<el-select
  v-model="selectedItems"
  multiple
  filterable
  allow-create
  default-first-option
  placeholder="请选择或输入">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

自定义模板

vue

<el-select v-model="selectedItems" multiple placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  </el-option>
</el-select>

属性说明

属性	说明	类型	可选值	默认值
multiple	是否多选	Boolean	-	false
filterable	是否可搜索	Boolean	-	false
allow-create	是否允许用户创建新条目	Boolean	-	false
collapse-tags	多选时是否将选中值按文字的形式展示	Boolean	-	false
multiple-limit	多选时用户最多可以选择的项目数	Number	-	0(无限制)

3. Table 多选表格

基本用法

vue

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="120">
    </el-table-column>
  </el-table>
  
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  }
}
</script>

属性说明

属性	说明	类型	可选值	默认值
type="selection"	显示多选框	String	-	-
reserve-selection	数据更新后保留之前选中的数据	Boolean	-	false
selectable	决定某行是否可被选择	Function(row, index)	-	-

4. Tree 多选树形控件

基本用法

vue

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps"
    @check="handleCheck">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleCheck(data, checkedStatus) {
      console.log(data, checkedStatus);
    }
  }
}
</script>

属性说明

属性	说明	类型	可选值	默认值
show-checkbox	节点是否可被选择	Boolean	-	false
check-strictly	是否严格的遵循父子不互相关联	Boolean	-	false
default-checked-keys	默认勾选的节点的 key 的数组	Array	-	-
node-key	每个树节点用来作为唯一标识的属性	String	-	-

5. 表单验证中的多选组件

验证多选框组

vue

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="至少选择两项" prop="checkedItems">
      <el-checkbox-group v-model="form.checkedItems">
        <el-checkbox label="option1">选项1</el-checkbox>
        <el-checkbox label="option2">选项2</el-checkbox>
        <el-checkbox label="option3">选项3</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    const validateChecked = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error('至少选择两项'));
      } else {
        callback();
      }
    };
    
    return {
      form: {
        checkedItems: []
      },
      rules: {
        checkedItems: [
          { validator: validateChecked, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
}
</script>

6. 自定义多选组件示例

带全选功能的多选框组

vue

<template>
  <div>
    <el-checkbox 
      :indeterminate="isIndeterminate" 
      v-model="checkAll" 
      @change="handleCheckAllChange">
      全选
    </el-checkbox>
    <el-checkbox-group 
      v-model="checkedItems" 
      @change="handleCheckedItemsChange">
      <el-checkbox 
        v-for="item in options" 
        :label="item.value" 
        :key="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      checkedItems: ['option1', 'option2'],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        { label: '选项4', value: 'option4' }
      ],
      isIndeterminate: true
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedItems = val ? this.options.map(item => item.value) : [];
      this.isIndeterminate = false;
    },
    handleCheckedItemsChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    }
  }
}
</script>