H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】vue的element-ui如何给多选框绑定key-value形式的数据

element的下拉框和单选框组件都分别绑定key和value,但多选框组件官方给的例子只能绑定value数据

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

比如我的数据结构是

[{"key":"1","value":"test1"},{"key":"2","value":"test2"}]

就不能用了,有什么办法解决

回答:

<el-checkbox-group v-model="checkList">
    <el-checkbox :label="item.key" v-for="(item, i) in data" :key="i">{{item.value}}</el-checkbox>
</el-checkbox-group>

把要展示的文字直接写在标签里就行了,label用来绑定值

官方文档上多选框组那里是这么写的

checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。

本文地址:H5W3 » 【element-ui】vue的element-ui如何给多选框绑定key-value形式的数据

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址