已为小白,啥都不懂 2022-01-20 09:28 采纳率: 98%
浏览 125
已结题

初次使用Checkbox 多选框,如何将已有的select下拉框修改成checkbox多选框

自己尝试的跟着element组件学习着写,但是由于技术有限,出现了以下几点bug
1.打开页面时,无法回显已选择的

img

2.全选按钮失效没作用

代码如下:

img

img

我想将点位的select下拉框修改成checkbox复选框

 <el-form-item label="点位" prop="dw_value">
                    <el-select v-model="ruleForm.dw_value" multiple filterable  placeholder="请选择" size="small"
                        class="widthfix">
                        <el-option v-for="item in dw_options" :key="item.id" :label="item.dwmc"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <template>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="ruleForm.dw_value" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="item in dw_options" :label="item.dwmc" :key="item.id" :value="item.id">
                        </el-checkbox>
                    </el-checkbox-group>
                </template>



 handleCheckAllChange(val) {
                let that = this
                this.ruleForm.dw_value = val ? that.dw_options : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.dw_options.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.dw_options.length;
            },

  • 写回答

3条回答 默认 最新

  • 前端互助会 2022-01-20 09:43
    关注

    那就要用复选框重新区写了,将下拉框的数据放复选框就可以了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月19日
  • 已采纳回答 2月11日
  • 修改了问题 1月20日
  • 创建了问题 1月20日

悬赏问题

  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示