elementui表单多选 element 多选框

本文目录

• 1. 用途
• 2. 普通多选框
• 3. 带边框的多选框
• 4. 多选框组
• 5. 按钮样式的多选框组
• 6. 多选框组选中数量限制
• 7. 选项通过变量自动生成
• 8. 小结

1. 用途

多选框用来从备选的选项中选择任意多个，0个或者全部均可。

注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。

2. 普通多选框

普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下：

HTML代码：

普通多选框：
    <el-checkbox v-model="checkedBasketball">篮球</el-checkbox>
    <el-checkbox v-model="checkedFootball">足球</el-checkbox>
    <el-divider></el-divider>

JS代码：

checkedBasketball: true,
    checkedFootball: false,

效果如下：

3. 带边框的多选框

带边框的多选框样式更加富有科技感，但是用法是一样的。HTML代码部分添加border属性即可：

带边框的多选框:
    <el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox>
    <el-checkbox v-model="checkedFootball" border>足球</el-checkbox>
    <el-divider></el-divider>

效果如下：

4. 多选框组

如果选项过多，每个多选框对应一个变量非常不方便，可以使用多选框组，统一绑定一个变量。变量的值即为选中项的label值的集合。

HTML代码：

多选框组，选中项{{checkList}}
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="basketball">篮球</el-checkbox>
      <el-checkbox label="football">足球</el-checkbox>
      <el-checkbox label="volleyball">排球</el-checkbox>
    </el-checkbox-group>
    <el-divider></el-divider>

JS代码：

checkList: ['basketball', 'football'],

效果如下：

5. 按钮样式的多选框组

可以将每个选项改为按钮样式，外观更加美观。

按钮样式多选框组
    <el-checkbox-group v-model="checkList">
      <el-checkbox-button label="basketball">篮球</el-checkbox-button>
      <el-checkbox-button label="football">足球</el-checkbox-button>
      <el-checkbox-button label="volleyball">排球</el-checkbox-button>
    </el-checkbox-group>
    <el-divider></el-divider>

效果如下：

6. 多选框组选中数量限制

可以给多选框组设置最小、最大选中数量限制，这样可以不必通过js代码控制选中数量，更加简单。

当然实际上还是使用js控制更加灵活，我个人还是倾向于使用js代码。

HTML代码：

多选框组选中数量限制
    <el-checkbox-group v-model="checkList2" :min="1" :max="2">
      <el-checkbox label="basketball">篮球</el-checkbox>
      <el-checkbox label="football">足球</el-checkbox>
      <el-checkbox label="volleyball">排球</el-checkbox>
    </el-checkbox-group>

JS代码：

checkList2: ['basketball'],

效果如下：

7. 选项通过变量自动生成

在实际项目中使用时，往往多选框的选项是根据后端发过来的数据决定的，是动态的，实例如下：

HTML代码：

动态生成选项，选中项{{courseSelected}}
    <el-checkbox-group v-model="courseSelected">
      <el-checkbox v-for="item in courseAll" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
    </el-checkbox-group>

JS代码：

courseAll: [{
        id: 1,
        name: "语文"
      },
      {
        id: 2,
        name: "数学"
      }],
      courseSelected: [],

效果如下：

8. 小结

建议使用多选框组，代码和逻辑更加清晰。