关于elementUI中el-check-box多选问题

该代码段展示了一个JavaScript函数`addItemFn`,用于遍历并处理`itemList`中的`ddList`。函数主要针对两种类型的控件:`CB`(复选框)和`SEL_MUL`(多选下拉)。对于这两种类型,它清空了值,并根据需要设置或转换了`value`属性。当`value`为字符串时,它会被分割成数组。该函数旨在更新多选输入的值,确保其格式正确。
摘要由CSDN通过智能技术生成

 

addItemFn (itemList, index) {
      for (let j = 0, item = null; j < itemList.ddList.length; j++) {
        item = itemList.ddList[j];
        item.value = "";
        if (item.controlType === "CB") {
          if (item.itemOptionList.length > 1) {
            setCheckBoxValue(item);
          } else {
            item.value = item.value;
          }
        } else if (item.controlType === "SEL_MUL") {
          setCheckBoxValue(item);
        }

        // item.value = ""
      }
      function setCheckBoxValue (item) {
        if (!item.value) {
          item.value = [];
        } else if (typeof item.value === "string") {
          item.value = item.value.split(",");
        } else if (!Array.isArray(item.value)) {
          item.value = [];
        }
      }

在Vue+ElementUI使用el-select组件进行单选或多选时,可以通过设置v-model来绑定选的值,并且根据el-select组件的multiple属性来决定是单选还是多选。 单选时,v-model绑定的是一个普通变量,当用户选择一个选项时,v-model变量会被更新为选的值。例如: ``` <el-select v-model="selectedItem"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其,`selectedItem`是一个普通变量,用来保存选的值。当用户选择一个选项时,`selectedItem`变量会自动更新。 多选时,v-model绑定的是一个数组,用来保存选的值。例如: ``` <el-select v-model="selectedItems" multiple> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其,`selectedItems`是一个数组,用来保存选的值。当用户选择一个或多个选项时,`selectedItems`数组会自动更新。 要回显已选的值,只需要将v-model绑定的变量或数组初始化为已选的值即可。例如: 单选回显: ``` <template> <el-select v-model="selectedItem"> <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 { selectedItem: "option2", // 已选的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 多选回显: ``` <template> <el-select v-model="selectedItems" multiple> <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: ["option2", "option4"], // 已选的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 在上面的例子,`selectedItem`变量或`selectedItems`数组被初始化为已选的值,因此在页面加载时,已选的选项会被自动回显。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值