精华内容
下载资源
问答
  • nested_el-checkbox element-ui的el-checkbox实现嵌套多选,单选 tips:chrome获取本地json数据时会产生跨域问题,建议用firefox直接打开 效果图 主要功能: 实现多选框层级嵌套 当选中一个二级子菜单的时候,其对应...
  • 主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • <el-select multiple collapse-tags clearable v-model="biddingStage" placeholder="请选择" @change="handleSelect">...el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change...

    element官网的下拉多选是这样的
    在这里插入图片描述
    如果想要实现有全选框和多选框的功能,需要稍微改造
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    <el-select multiple collapse-tags clearable v-model="biddingStage" placeholder="请选择" @change="handleSelect">
       <div style="padding: 0 20px;line-height:34px">
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
       </div>
       <el-checkbox-group v-model="biddingStage">
           <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
               <el-checkbox style="pointer-events: none" :label="item.value"></el-checkbox>
           </el-option>
       </el-checkbox-group>
    </el-select>
    

    el-checkbox 使用 style=“pointer-events: none” 是为了阻止事件冒泡,触发了两次el-select的change事件

    checkAll: false, //招标阶段 是否全选
    isIndeterminate: false, //全选复选框标识        
    options: [
        { name: '公告阶段', value: '公告阶段' },
        { name: '报名阶段', value: '报名阶段' },
        { name: '发标阶段', value: '发标阶段' },
        { name: '开标阶段', value: '开标阶段' },
        { name: '评标阶段', value: '评标阶段' },
        { name: '定标阶段', value: '定标阶段' },
        { name: '单位确认', value: '单位确认' },
    ],
    biddingStage: [],
    
    
    // 下拉框选择事件
    handleSelect(value) {
        const checkedCount = value.length;
        this.checkAll = checkedCount === this.options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    },
    // 全选事件
    handleCheckAllChange(val) {
        const data = this.options.map(item => {
            return item.value
        })
        this.biddingStage = val ? data : [];
        this.isIndeterminate = false;
    },
    

    如果需要把右边的√去掉,el-select加上class和popper-append-to-body=false属性,然后css修改

    在这里插入图片描述

    <el-select 
    	multiple 
    	collapse-tags 
    	clearable 
    	v-model="biddingStage" 
    	placeholder="请选择" 
    	@change="handleSelect" 
    	class="biddingStageSty" 
    	:popper-append-to-body="false"
    >
    ...
    </el-select>
    
    .biddingStageSty /deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
       	display: none;
    }
    
    展开全文
  • 加一个key就好了; 代码: <template>...el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px"> <el-row> <el-col :span="8"> <el-form-.

    在这里插入图片描述
    加一个key就好了;
    代码:

    <template>
        <div>
            <el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item class="w80" label="数据源:" prop="data">
                            <el-select v-model="ruleForm.data" placeholder="请选择数据源">
                                <el-option label="数据源1" value="sourceList1" />
                                <el-option label="数据源2" value="sourceList2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item class="w80" label="数据表:" prop="data2">
                            <el-select v-model="ruleForm.data2" placeholder="请选择数据表">
                                <el-option label="数据表1" value="sourceList1" />
                                <el-option label="数据表2" value="sourceList2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item class="w80" label="数据表:">
                            <el-table key="tableData" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                                <el-table-column type="index" label="序号" width="50" align="center">
                                </el-table-column>
                                <el-table-column prop="date" label="字段名" align="center">
                                </el-table-column>
                                <el-table-column prop="date2" label="字段中文名" align="center">
                                </el-table-column>
                                <el-table-column prop="date3" label="字段类型" align="center">
                                </el-table-column>
                                <el-table-column prop="parameter" label="返回参数" align="center" :key="checkAll">
                                    <template slot="header">
                                        <el-checkbox size="mini" v-model="checkAll" @change="handleCheckAllChange">返回参数</el-checkbox>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-checkbox size="mini" v-model="scope.row.parameter" @change="handleChecked"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="parameter2" label="是否必填" align="center">
                                    <template slot-scope="scope">
                                        <el-checkbox size="mini" v-model="scope.row.parameter2"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="parameter3" label="请求参数" align="center">
                                    <template slot-scope="scope">
                                        <el-checkbox size="mini" v-model="scope.row.parameter3"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="format" label="显示格式" align="center">
                                    <template slot-scope="scope">
                                        <el-select size="mini" v-model="scope.row.format" placeholder="请选择数据表">
                                            <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in formatList" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dictionaries" label="字典项" align="center">
                                    <template slot-scope="scope">
                                        <el-select size="mini" v-model="scope.row.dictionaries" placeholder="请选择数据表">
                                            <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in dictionariesList" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="operationType" label="操作类型" align="center">
                                    <template slot-scope="scope">
                                        <el-select size="mini" v-model="scope.row.operationType" placeholder="请选择数据表">
                                            <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in operationTypeList" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="step2-foot">
                <div style="text-align: center">
                    <el-button @click="back">上一步</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: 'paramConfig',
        props: {},
        components: {},
    
        data() {
            return {
                ruleForm: {
                    multipleSelection: []
                },
                tableData: [{
                    date: 'XM',
                    date2: '王小虎',
                    date3: '字符型(string)'
                }, {
                    date: 'XB',
                    date2: '姓名',
                    date3: '字符型(string)'
                },],
                operationTypeList: [],
                dictionariesList: [],
                formatList: [],
                rules: {
                    data: { required: true, message: '请选择数据源', trigger: 'change' },
                    data2: { required: true, message: '请选择数据表', trigger: 'change' }
                },
                checkLen: 0,
                checkAll: false
            }
        },
        computed: {},
        beforeMount() { },
        mounted() { },
        methods: {
            // 全选
            handleCheckAllChange(val) {
                console.log(val)
                const newData = this.tableData.map(item => {
                    return {
                        ...item,
                        parameter: val
                    }
                })
                this.tableData = newData
                if (val) {
                    this.checkAll = true
                    this.checkLen = newData.length
                } else {
                    this.checkAll = false
                    this.checkLen = 0
                }
            },
            handleChecked(val) {
                this.checkLen = val ? this.checkLen + 1 : this.checkLen - 1
                this.checkAll = this.checkLen == this.tableData.length
            },
            handleSelectionChange(val) {
                this.ruleForm.multipleSelection = val
            },
            back() {
                this.$emit('back')
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const params = {
                            isActive: this.isActive
                        }
                        this.$emit('next', params)
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        }
    }
    
    </script>
    <style lang='scss' scoped>
    </style>
    
    
    展开全文
  • <el-checkbox name="checked" v-model="checked" style="width:1rem;margin-left:-0.76rem;" @change="checkChange"></el-checkbox> <!-- <el-form-item label="自动获取" prop="name" class="faceStore-form-...
  • elementUI框架文档只提供disabled的标签,这种状态是固定的,不是动态的,那么,如何给el-checkbox-group数组下面的某一项el-checkbox-button,动态添加禁用状态呢? 二、动态添加 动态添加禁用标签,使用:disabled...

    前言: 最近在项目中,需要一个动态禁用el-checkbox选项的功能,某些选项在某些场景下,需要禁止掉,让用户不可选的状态。

    一、elementUI框架文档

           elementUI框架文档只提供disabled的标签,这种状态是固定的,不是动态的,那么,如何给el-checkbox-group数组下面的某一项el-checkbox-button,动态添加禁用状态呢?
    在这里插入图片描述

    二、动态添加

           动态添加禁用标签,使用:disabled属性,前面加冒号,disabled后面接上禁用的条件。

    <div class="funcItems">
                    <p>其他功能</p>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="func3.checkedFuncs" @change="handleCheckedFuncsChange3">
                        <el-checkbox name="functionType3" v-for="func in func3.funcs" :label="func.id" :key="func.id" :disabled="func.id == 'DIAN_ZI_JIA_QIAN'">{{func.name}}</el-checkbox>
                    </el-checkbox-group>
    </div>
    

           如上所示,这样就可以动态禁用不符合条件的checkbox多选框,禁用用户的相关操作。

    参考博客:
    ElementUI的el-checkbox-group插件,动态禁用el-checkbox项 https://www.jianshu.com/p/706df92f543d
    elemetUI中el-checkbox-group经过条件判断选中与不选中的问题 https://www.cnblogs.com/home-/p/11927507.html
    解决element动态多选框组(el-checkbox-group)无法设置默认值的问题 https://www.likecs.com/show-89857.html

    展开全文
  • el-checkbox v-model="checkedAllTop" @change="handleCheckAllChange1($event)" class="largeCheckAll">大全选</el-checkbox> <div v-for="(item,index) in tableData" :key="item.id"> <...

    在这里插入图片描述

    <template>
      <div>
    		<el-checkbox v-model="checkedAllTop"  @change="handleCheckAllChange1($event)" class="largeCheckAll">大全选{{selectedLength}}</el-checkbox>
    	
    		<div v-for="(item,index) in tableData" :key="item.id">
    			  <el-checkbox v-model="item.checkedAll" @change="handleCheckAllChange2($event,index)" class="checkedAll">小全选{{item.checklist.length}}</el-checkbox>
    			  <el-checkbox-group v-model="item.checklist">
    				<el-checkbox @change="handleCheckAllChange3(item.checklist,item.aerobicsList,index)"  v-for="(item1,index1) in item.aerobicsList" :label="item1.id" :key="item1.id">{{item1.title}}</el-checkbox>
    			  </el-checkbox-group>
    		</div>
    		
    		<div v-for="(item,index) in tableData" :key="item.id" class="result">
    			<div v-for="(item1,index1) in item.checklist" :key="item1" class="result-item">
    				{{item1}}
    			</div>
    		</div>
      </div>
    </template>
    
    <script>
    
     export default {
        data() {
          return {
    		  selectedLength:0,
    		  checkedAllTop:false,//大全选
    		  tableData:[
    		    {
    		       checklist: [],//存放选中的id
    		       checkedAll:false,//小全选
    		       aerobicsList: [{
    		            id: "0b54937bce064abb8d1463e0dc31ab33",
    		            title: "如果",
    		        },{
    		            id: "gdrgr3dg2rdhtfhtfh3tfhdhyjhthrd",
    		            title: "电话",
    		        },{
    		            id: "234gsgrhtfht2fh4tfht23hthdh4rd2h",
    		            title: "粉底",
    		        },{
    		            id: "gdr3drg234drg2ht3dhf3j23yt234jty",
    		            title: "多个",
    		        },]
    		    },
    		    {
    		       checklist: [],//存放选中的id
    		       checkedAll:false,//小全选
    		       aerobicsList: [{
    		            id: "0b54937bce064abb8d1463e0dc31ab33",
    		            title: "个滚",
    		        },{
    		            id: "3gdrgr2dgrdhtfhtfhtfhdhy33jhthrd",
    		            title: "肤饭",
    		        },{
    		            id: "34gsg2rhtfhtfht5fh3423thth35dhrdh",
    		            title: "色粉",
    		        },{
    		            id: "2gdrdr23gdrghtdhfjfee52sseytj22ty",
    		            title: "得分",
    		        },]
    		    },
    		  ],
    	  }
    	},
    	  methods: {
    		  handleCheckAllChange1(event){ //大全选
    			this.tableData.forEach((item,index)=>{
    			  this.handleCheckAllChange2(event,index)
    			  if(event == true){
    				this.tableData[index].checkedAll = true
    			  }else{
    				this.tableData[index].checkedAll = false
    			  }
    			})
    			this.largeCheckAll()
    		  },
    		  handleCheckAllChange2(event,index){ //小全选
    			this.tableData[index].checklist = []
    			if(event == true){
    			  this.tableData[index].aerobicsList.forEach((item)=>{
    				this.tableData[index].checklist.push(item.id)
    			  })
    			}
    			this.largeCheckAll()
    		  },
    		  handleCheckAllChange3(checklist,aerobicsList,index){ //每一项的选中
    			if( checklist.length == aerobicsList.length){
    			   this.tableData[index].checkedAll = true
    			}else{
    			  this.tableData[index].checkedAll = false
    			}
    			this.largeCheckAll()
    		  },
    		  largeCheckAll(){ //检查大全选是否需要选中
    			  this.selectedLength = 0
    			  let CheckedAllList = []
    			  this.tableData.find((item)=>{
    			     if(item.checkedAll == false){ //如果找出小全选中有false的即代表大全选不能选中
    					CheckedAllList.push(item)
    			     }
    				 this.selectedLength += item.checklist.length
    			  })
    			  if(CheckedAllList.length>0){
    			     this.checkedAllTop = false
    			  }else{
    			     this.checkedAllTop = true
    			  }
    		  }
    	  }
    }
    </script>
    
    <style scoped>
    .largeCheckAll{
    	margin-bottom: 40px;
    }
    .checkedAll{
    	margin-top: 20px;
    }
    .result{
    	margin-top: 30px;
    	min-height: 50px;
    	border-radius: 5px;
    	border: 1px solid #2C3E50;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    }
    .result-item{
    }
    </style>
    
    
    
    展开全文
  • - 给定一个字段,例如技术领域,页面上设置为checkbox多选项。 - 选择之后,保存json字符串到数据库(直接value的形式) - 列表展示直接用json字符串展示 - 详情页面根据之前选定的json字符串设置对应的选项打勾
  • el-select回显、el-checkbox-group回显 1、el-select回显 !注意:回显需要:value的值和v-model的值 === (全等于),意思就是类型也必须相同。 <el-form-item prop="reportDate" label="周报生成日期"> ...
  • 表格表头自定义el-checkbox,全选单选 实现思路 table数据添加勾选属性itemCheck,默认为false 表头添加render函数,渲染el-checkbox,绑定chang事件 在change事件中处理table数据,给itemCheck重新赋值,改变行...
  • 使用el-checkbox-group时,el-checkbox后面的文本或者div不显示 起初setScore类所在的div死活不显示,各种添加样式都不生效,强制渲染也没用,最后发现是font-size等于0,添加样式后ok了 <el-form-item prop=...
  • 当带有选择模式的el-table,在el-checkbox-group上下文内时,会出现“选择粘连”现象; 推广地,当多个,带有选择模式的el-table,在同一个,el-checkbox-group上下文内时,会出现广义的“选择粘连”现象; explain:...
  • el-checkbox-group el-checkbox 二、上代码: 1. 整体结构(列表页和详情页): 2. detail页面的组件Info: <el-checkbox-group v-model="chooseRoleNames"> <el-checkbox v-for="(item,index) ...
  • 关于el-table的展开 选择 expand 选项 <el-dialog title="权限列表" :visible.sync="formVisible1"> <div><br></div> <el-button @click="send()" type="primary">发送</el-...
  • 碰到的问题 今天用elment-ui时碰到了一个坑,记录一下: 项目中有一个页面是带批量下载功能的,需要点击批量操作才会出现全选按钮和item中的多选...el-button @click="isBatch=!isBatch;!isBatch&&checkedList.
  • elementUl的el-checkboxel-select用法

    千次阅读 2020-11-24 14:06:44
    一开始,我把el-select组件放在了el-checkbox里面,删除多选的分组后,总会影响el-checkbox的勾选,很难实现想要的效果。 解决方案: el-select放到el-checkbox外,慢慢实现了想要的效果。...
  • 1. 自定义 多选框 el-checkbox; 预览: Html: <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change=.../el-checkbox ...el-checkbox-group v-model="checkedCit
  • elementui el-checkbox全选

    2021-11-10 10:23:43
    <el-checkbox class="allCheck" :indeterminate="item.isIndeterminate" v-model="item.isCheckAll" @change="handleCheckAllChange(item...el-checkbox-group v-model="item.value" @change="handleCheckedChange(i
  • el-radio选中问题 lable前无冒号(label="1") 备选项 备选项 lable前有冒号(:label="1") 备选项 备选项 如果以上方法无效就使用以下方法 显示 不显示 el-checkbox选中问题 陀螺助手 扫码盒子 参考链接:...
  • * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change=...
  • 1.先看下效果 2.代码分析 ...<el-button @click="checkAll(true)">全选</el-button> ...el-button @click="checkAll(false)">.../el-button>...el-button @click="checkInvert...el-checkbox-group v-model="se
  • el-checkbox 三级联动实现,一层数据结构和两层数据结构的同步选中取消 效果图 点击获取数据,即可获取当前选中所有的id 代码 <template> <div style="display: flex"> <div> <el-checkbox...
  • 1.<template>...el-checkbox-group v-model="ruleForm.values" class="m-el-checkbox-group" > <el-checkbox v-for="item in list" :label="item.key" :key="item.key
  • element el-checkbox-group 的用法

    千次阅读 2021-07-07 10:59:47
    el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如:如果lable直接设置为整个item,则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值,则v-model绑定的数组里的...
  • el element 组件el-checkbox

    2021-08-13 18:36:59
    el-checkbox是多选框 <el-checkboxv-if="row.is_sub==0"v-model="row.checked":checked="row.checked":label="row.name"@change="new_change_res(row)"></el-checkbox> v-if 是Vue的关键字,表示...
  • vue封装element-ui的el-checkbox实现嵌套多选组件 要实现的效果 如何使用 <multi-check-list :dataList="dataList" :isCheckAll='true' @change="handlerDataCheck"></multi-check-list> import ...
  • 找了半天原因,后来发现是el-radio被封装多层,根元素不是input, 我认为是由于事件冒泡机制导致的,因为根元素是label,click事件绑定到了label上。 因为点击label的时候,事件冒泡一次,同时会触发关联的input的...
  • el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂。重要的是@chage到我们写的类 <el-checkbox-group v-model=...
  • <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change=...el-checkbox-group v-model="checkedTypes" @change="handleCheckedTypesChange"> <el-checkbox style="width:150px;" v-for=

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,746
精华内容 9,898
关键字:

el-checkbox