精华内容
下载资源
问答
  • el-tree 复选框回显问题
    千次阅读
    2020-08-10 14:03:17
    <el-tree class="filter-tree" :data="dataTree" :props="defaultProps" :filter-node-method="filterNode" show-checkbox node-key="id" ref="tree" style="height: 50vh;overflow-y: auto;"></el-tree>
    
    watch: {
      filterText(val) {
         this.$refs.tree.filter(val);
      }
    },
    methods:{
      filterNode(value, data) {
        if (!value) return true;
           return data.label.indexOf(value) !== -1;
        }
    }
    //编辑回显
    showEdit(row) {
       vm.$nextTick(function(){
           this.visibleDia = true;
           this.getTreeList().then(res => {
             if (res && res.length !== 0) {
                this.$refs.tree.setCheckedKeys("返回的子节点id的数组");  //注意,不要带父节点id
              } else {
                this.dataTree = [];
              }
           })
       })
    },
    // 获取树列表
    getTreeList () {
      return new Promise(resolve => {
        this.$http.post({}).then(res => {
          this.dataTree = res.data.treeList;
          resolve(this.dataTree);
        })
      })
    },
    //提交
    submit() {
      console.log(this.$refs.tree.getCheckedKeys()) //当前选中的节点id
      console.log(this.$refs.tree.getHalfCheckedKeys()) //当前半选中状态也就是父节点的id
      var idList =(this.$refs.tree.getCheckedKeys()).concat(this.$refs.tree.getHalfCheckedKeys())
      // 提交接口,分开传选中节点id数组,和选中加半选中状态数组
    },
    //关闭
    close () {
      this.defaultCheckedKeys = this.$refs.tree.setCheckedKeys([]);
      this.visibleDia = false;
    },

     

    更多相关内容
  • 使用elementUI的复选框组合: el-checkbox-group el-checkbox 二、上代码: 1. 整体结构(列表页和详情页): 2. detail页面的组件Info: <el-checkbox-group v-model="chooseRoleNames"> <el-...

    一、场景:

    用户表——角色表,用户管理界面可以选择角色,并且每次初始化时候支持“回显”,如图:

    使用elementUI的复选框组合:

    el-checkbox-group

    el-checkbox

    二、上代码:

    1. 整体结构(列表页和详情页):

    2. detail页面的组件Info:

    <el-checkbox-group v-model="chooseRoleNames">
      <el-checkbox v-for="(item,index) in totalRoles" @change="change(index, item)" :label="item.name" :key="index" name="type" class="favour_checkbox" >{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    
      data() {
        return {
          loading: false,
          info: {},
          totalRoles: [],
          readOnly: false,
          placeHolder: '请输入内容',
          chooseRoleNames: []  // 选中的数据 // 注意: el-checkbox取得的时label属性的值. 官方文档有说明不能为Object类型! 且label属性只能是String,Number,Boolean类型
        }
      },

    el-checkbox-group

    其中的chooseRoleNames是(发送axios请求后台api返回的)该用户对应的角色名的数组name[String](注意:必须为字符串,不支持Object)

    el-checkbox(解决不回显的问题:重点在这,仔细看

    其中的totalRoles是(发送axios请求后台api返回的)所有角色(注意:勾选选中后,返回给el-checkbox-group的是对应的“:label”的值,而不是“:value”。必须为字符串String或Number或Boolean类型,不支持Object,如下图,参看官方文档:https://element.eleme.cn/#/zh-CN/component/checkbox#checkbox-attributes

    3. detail页面

    <template>
      <div class="inner-content">
        <div class="oag-report">
          <div class="align-right m-b-10 m-t-10">
            <el-button v-show="showTentative" v-loading.fullscreen.lock="loading" type="danger" @click="save()">保存修改</el-button>
          </div>
          <info :id="id" :name="name" :status="status" @catchInfomation="catchInfomation" ref='infoData'/>
        </div>
      </div>
    </template>

    保存save方法放在在detail中:

    <script>
    import Info from './components/Info'
    import { saveInfo } from '../../../api/system/user'
    export default {
      components: {
        Info
      },
      data() {
        return {
          id: +this.$route.query.id,
          name: this.$route.query.name,
          status: +this.$route.query.status,
          infomation: {},
          toTentative: 0,
          showTentative: true,
          showFinish: false,
          showRevise: false,
          loading: false,
          exportExcelLoading: false,
          exportPdfLoading: false
        }
      },
      methods: {
        catchInfomation(infomation) {
          this.infomation = infomation
        },
        save() {
          this.loading = true
    
          // console.log(this.$refs.info.totalRoles)
          let chooseRoles = []
          this.$refs.infoData.totalRoles.forEach(val=>{
            let t = this.$refs.infoData.chooseRoleNames.findIndex(find=>{
              return find == val.name
            })
            if(t>-1){
              chooseRoles.push(val)
            }
          })
          this.infomation.roles = chooseRoles;
          saveInfo(this.infomation).then(response => {
            if (!response) {
              alert('保存失败!')
            } else {
              alert('保存成功!')
              this.goback()
            }
            this.loading = false
          })
        },
        goback() {
          this.$router.go(-1)
        }
      }
    }
    </script>

     

    VUE也是正在学习,所以踩这个坑浪费了我一整天时间,网上关于checkbox回显失效的问题,说的都不是我想要的,还有的使用tree方式绕过去了,不好过还好找了以前的同事,分分钟解决了。

    所以基础很重要,而且还要会看官方文档!!

     

    希望对大家有所帮助!

    展开全文
  • 先上效果 第一步:html <div class="table-title">...el-checkbox :indeterminate="rwisIndeterminate" v-model="rwcheckAll" @change="rwhandleCheckAll" >全选</el-checkbox> .

    先上效果

    第一步:html

     

              <div class="table-title">
                <el-checkbox
                  :indeterminate="rwisIndeterminate"
                  v-model="rwcheckAll"
                  @change="rwhandleCheckAll"
                >全选</el-checkbox>
              </div>
              <div v-loading="rwloading" style="min-height: 180px;">
                <div v-for="(item,index) in RW" :key="index">
                  <el-checkbox-group
                    class="email-checkbox"
                    v-model="checkedRw"
                    @change="handleCheckedrwChange"
                  >
                    <el-checkbox
                      @change="rwhandleSingleCheck($event, item.taskName, item)"
                      style="display: block;text-align: left;"
                      :label="item.taskName"
                      :key="item.taskName"
                    >{{ item.taskName }}</el-checkbox>
                    <el-radio-group v-model="rwradio[index][item.taskName]">
                      <el-radio
                        style="margin-left: 20px;"
                        v-for="radioitem in item.versionList "
                        :key="radioitem.taskId"
                        :label="radioitem.taskId"
                        @change="radiochange(radioitem, item.taskName)"
                      >版本{{ radioitem.taskVersion }}(有效监控企业{{ radioitem.companyNum }}家)</el-radio>
                    </el-radio-group>
                  </el-checkbox-group>
                </div>

    方便大家知道遍历的到底是什么数据,我把后端回来的数据展示一下,仅供参考

     

    第二步:CSS(每个需求的样式都不同,提供的样式仅供参考)

       .table-title {
         width: 100%;
         height: 40px;
         padding: 10px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         text-align: left;
       }
       .email-checkbox {
         padding: 20px 0 0 20px;
         text-align: left;
    
         .el-checkbox {
           width: 33.33%;
           margin: 10px 0 10px;
         }
       }
    

    第三步:JS

    首先在data中声明必要的变量

      data() {
        return {
          rwradio: [],//单选框组绑定的数据
          rwisIndeterminate: false,//控制全选样式
          rwcheckAll: false,//全选
          checkedRw: [],//当前分页选中的任务
          allrwPageChecked: null, // 所有选中的任务
          RW: [],//接口返回来的总数组
          rwloading: false,//数据未加载完毕时,展示加载中的效果
        }
      },

    接下来就是实现功能啦

    功能一:初始化页面的展示

        getrwList() {
          this.rwloading = true
          this.axios.post('地址', 请求参数).then(res => {
            this.RW = res.data.data.rows
            //单选框组因为是遍历渲染的,所以必须是数组格式,不能是对象或者简单类型
            //reduce方法在这里不过多说明,大家自行了解
            this.rwradio = this.RW.reduce((ary, item, index) => {
              const obj = {}
              //初始设置单选框组每个绑定的都为0,单选框绑定的是taskId,所以都是0的话,对应不上,单选框肯定是不会有选中效果的。
              obj[item.taskName] = 0
               //如果有勾选,一般是查看效果时,进行回显,this.allrwPageChecked是有数据的(数据格式与后端返回数据结构一致,请参考上方),那么此时再把单选框重新赋值对应的taskId。此时可以对应啦,那么单选框就回有选中的效果。
              if (this.allrwPageChecked) {
                this.allrwPageChecked.forEach(i => {
                  if (i.taskName == item.taskName) {
                    obj[i.taskName] = i.versionList[0].taskId
                  }
                })
              }
              ary.push(obj)
              return ary
            }, [])
             //这里是形成一个复选框绑定的数组,后续的方法会用到
            this.taskNameary = this.RW.reduce((ary, item) => {
              ary.push(item.taskName)
              return ary
            }, [])
            this.initrwPageChecked(this.taskNameary)
          })
          this.rwloading = false
        },
    //value就是在getrwList()方法中传递过来的复选框的数组
        initrwPageChecked(value) {
          let checked = [];
           //筛选已勾选的taskName,并添加到一个空数组中( checked),
          if (this.allrwPageChecked) {
            value.forEach(item => {
              this.allrwPageChecked.forEach(i => {
                if (value.includes(i.taskName)) {
                  checked.push(i.taskName)
                }
              })
            })
          }
           //Array.from(new Set(checked))是对checked进行去重,并赋值给复选框组所绑定的checkedRw
          this.checkedRw = Array.from(new Set(checked))
    //以下请查看element-ui的官方网站,都是固定的写法
          let checkedCount = this.checkedRw.length
          this.rwcheckAll = checkedCount === this.RW.length
          this.rwisIndeterminate = checkedCount > 0 && checkedCount < this.RW.length
        },

    功能二:全选

        rwhandleCheckAll(val) {
    //val返回的是true/false
    //如果全选
          if (val) {
    //1.checkedRw复选框绑定的值等于初始化页面时获取到的所有(this.taskNameary如果不记得了,请看功能一)
            this.checkedRw = this.taskNameary
    //2.this.allrwPageChecked代表已选中的,那么它就把初始化页面获取到的所有都添加进去
            this.RW.forEach(item => {
              this.allrwPageChecked.push(item)
            })
    //3.对this.allrwPageChecked进行数组复杂类型的去重
            let allrwPageCheckedobj = {}
            this.allrwPageChecked = this.allrwPageChecked.reduce((ary, item) => {
              allrwPageCheckedobj[item.taskName] ? '' : allrwPageCheckedobj[item.taskName] = true && ary.push(item)
              return ary
            }, [])
    //4.rwradio单选框组此时就不能赋值为0了,而是直接赋值(我这里时默认选第一条数据,所以绑定的是versionList[0])
            this.rwradio = this.RW.reduce((ary, item, index) => {
              const obj = {}
              obj[item.taskName] = item.versionList[0].taskId
              ary.push(obj)
              return ary
            }, [])
          } 
    //如果取消全选
    else {
    //1.checkedRw复选框为空数组
            this.checkedRw = [];
    //2.this.allrwPageChecked重新赋值为,不包含初始化页面获取到的所有
            this.RW.forEach(item => {
              this.allrwPageChecked = this.allrwPageChecked.reduce((ary, i) => {
                if (i.taskName != item.taskName) {
                  ary.push(i)
                }
                return ary
              }, [])
            });
    //3.rwradio单选框组再次全部赋值为0
            this.rwradio = this.RW.reduce((ary, item, index) => {
              const obj = {}
              obj[item.taskName] = 0
              ary.push(obj)
              return ary
            }, [])
          }
    //4.这个必须加上控制全选按钮的样式
          this.rwisIndeterminate = false
        },

    功能三:复选框组的勾选控制全选按钮

    handleCheckedrwChange(value) {
    //直接看官方文档
          let checkedCount = value.length
          this.rwcheckAll = checkedCount === this.RW.length
          this.rwisIndeterminate = checkedCount > 0 && checkedCount < this.RW.length
        },

    功能四:复选框单独选中/取消

    //val:是否勾选;rw:复选框的名称;rwobj:单个复选框包含的所有数据
        rwhandleSingleCheck(val, rw, rwobj) {
    //如果勾选
          if (val) {
    //1.this.allrwPageChecked代表已勾选的数组,把rwobj添加进去
            this.allrwPageChecked.push(rwobj)
    //2.this.allrwPageChecked进行去重
            let allrwPageCheckedobj = {}
            this.allrwPageChecked = this.allrwPageChecked.reduce((ary, item) => {
              allrwPageCheckedobj[item.taskName] ? '' : allrwPageCheckedobj[item.taskName] = true && ary.push(item)
              return ary
            }, [])
    //3. this.rwradio单选框组对应的数据赋值为正确的值而非0
            this.RW.forEach(item => {
              if (item.taskName == rw) {
                this.rwradio.forEach(i => {
                  i[rw] = item.versionList[0].taskId
                })
              }
            })
          } 
    //如果取消勾选
    else {
    //1.this.allrwPageChecked通过indexOf方法,找到对应的索引值,在通过splice方法,进行删除
            this.allrwPageChecked.forEach(item => {
              if (item.taskName == rwobj.taskName) {
                this.allrwPageChecked.splice(this.allrwPageChecked.indexOf(item), 1)
              }
            })
    //2.this.rwradio单选框组对应的数据再次赋值为0
            this.rwradio.forEach(item => {
              item[rw] = 0
            })
          }
        },

    功能五:单选框的取消切换

    //obj:单选框的对象信息;name:单选框对应的多选框的名字,也就是taskname
        radiochange(obj, name) {
    //1.创建一个this.allrwPageChecked所需要的格式
          let a = {
            taskName: name,
            versionList: [obj]
          }
    //2.当多选框没有勾选的情况时,也就是直接选中而非进行单选框的切换
          if (this.checkedRw.indexOf(name) == -1) {
    //2.1直接把a添加到已勾选的数组中,此时this.allrwPageChecked是没有重复项的,不需要去重
            this.allrwPageChecked.push(a)
          } 
    //3.当多选框组已经勾选,是单选框组进行切换
    else {
    //3.1根据indexOf方法(从前往后找,找到就停下来,不再继续查找)找到taskName相等时,item对应的索引
    //3.2根据splice方法,对this.allrwPageChecked数组进行替换
            this.allrwPageChecked.forEach(item => {
              if (item.taskName == name) {
                this.allrwPageChecked.splice(this.allrwPageChecked.indexOf(item), 1, a)
              }
            })
          }
    //4.针对this.checkedRw多选框组不存在数据进行添加
          if (!this.checkedRw.includes(name)) {
            this.checkedRw.push(name)
          }
    //5.控制全选按钮的样式,一定要写
          this.rwisIndeterminate = true
        },

    展开全文
  • el-checkbox-group v-model="checkedCities" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> </el-checkbox-group> </...

    先上一个例子

    <template>
      <el-checkbox-group 
        v-model="checkedCities"
        :min="1"
        :max="2">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
    </template>
    <script>
      const cityOptions = ['上海', '北京', '广州', '深圳'];
      export default {
        data() {
          return {
            checkedCities: ['上海', '北京'],
            cities: cityOptions
          };
        }
      };
    </script>

    1.这种选择数组只是单元素而不是object的时候,直接让绑定的model和循环的集合对应就可以达到复选框回显

    2.复选框数组里面是对象时,复选框回显方法

    <el-checkbox-group v-model="formData.field101" size="medium" @change="handleChecked()">
              <el-checkbox
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.id"
                  >{{ item.value}}</el-checkbox
               >
    </el-checkbox-group>

    field101Options的数据结构是

    field101Options: [
            {
              value: "选项一",
              id: 1,
            },
            {
              value: "选项二",
              id: 2,
            },
          ],

    解决方法很简单,让你的model里面的数据结构等于 

    formData: {
            field101: [
              {
                value: "选项一",
                id: 1,
              },
              1,
              {
                value: "选项二",
                id: 2,
              },
              1
            ],
          },

    就可以达到回显效果,一定要在每个选择对象外面加上该条对象里面的id值

    展开全文
  • this.form = res.data this.form.report_project_idsArr = stringResult 回显成功,但是无法再次点击,大佬们这个怎么搞 回答 如果是新人,那就给你说详细一点 1.先确定你的vue版本是不是2.X,如果是,那么你的这行...
  • 目录vue之ele中el-checkbox-group复选框组件的使用Home.vueSetTeam.vue vue之ele中el-checkbox-group复选框组件的使用 Home.vue <!-- 描述: 作者:xzl 时间:05月05日160944 --> <template> <div...
  • el-checkbox label绑定对象回显

    千次阅读 2020-06-10 13:29:55
    你可以用原生的写 ...input type="checkbox" :id="tag.teacher_id" :value="tag" v-model="ruleForm.checkboxGroup" /> <label :for="tag.teacher_id">{{tag.teacher_name}}</label>
  • Element-ui框架checkbox复选框回显

    千次阅读 2019-04-18 10:58:00
    先看下效果是不是你需要的。。。。。 然后废话不多说,上代码,希望能够帮助到你。。。 1 <template> 2 <...el-form label-width="100px" class="demo-ruleForm"> 4 ...
  • el-table默认勾选详解
  • el-table复选框全部勾选以及勾选回显 根据后端回显效果 ...复选框回显 const { data } = await getTableData() data.forEach(item => { if(item.isSelect){ // 根据后端返回是否勾选的字段判断是否勾
  • 贴上代码: <el-checkbox-group v-model="formData.settingList"> <el-checkbox label="ReadingStatus">是否开启阅读状态标记el-checkbox> <el-checkbox label="Comment">是否开启评论el-checkbox> <el-checkbox ...
  • vue项目中,element UI复选框影响底部确认、批量删除等按钮,el-checkbox
  • 解决el-checkbox传值编辑回显问题。

    千次阅读 2020-10-15 14:30:49
    {{city.name}} data() { return { value: [], cities: [{name:‘北京...如果el-checkbox标签之间不写任何内容显示也是label的内容,但是我们在el-checkbox标签里面加上{{}}name的值。这个其实就是显示的内容啦。 ...
  • 1、el-table 复选框实现删除(包含批量删除) <template> <div class="app-container"> <div> <el-card class="box-card" style="margin-bottom: 20px"> <el-form ref="searchForm" ...
  • 实在百度的基础上自己加了回显功能 原文地址:https://www.cnblogs.com/hcxy/p/9482762.html 附上代码: <template> <div class="table-demo"> <el-form ref="formInline" :model="seachData" ...
  • 关于el-checkbox的弹出层回显使用方法

    千次阅读 2020-06-12 17:15:05
    <!--添加运动员 tysList代表所有--> <el-dialog title="添加运动员" :visible.sync="MessagedialogVisible" :modal="false" width="50%" top="25vh" > <...el-checkbox-group ...
  • Element-ui框架checkbox复选框全选加回显功能 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox> <...
  • Vue+Element-ui实例_el-checkbox二级复选框

    千次阅读 2021-01-06 15:09:21
    想必大家在很多时候都会碰到多级复选框的情况吧,下面这篇文章介绍了vue结合el-checkbox组件,编写的一个二级复选框案例(多级也可以根据此案例仿写)。 主要难点: (1)多次使用v-for循环,把需要展示的复选框...
  • 关于el-table的多选,相信只要做过项目的朋友都会用过,这其中有一个坑,是很大概率会踩到的,就是第一页选中了之后,切到第二页选择完之后,切换回第一页发现第一页选择的不见了,怎么办??? 这个坑,老实说不难...
  • <el-tree ref="refTree" :data="treeData" show-checkbox node-key="id" highlight-current :props="defaultProps" default-expand-all :expand-on...
  • el-table ref="table" :data="tableData" :row-key="getRowKey"> <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column> </el-table> getRowKey...
  • 代码如下就会造成数据回显后不能再次勾选: 修改如下: 回显后无法重新勾选问题就解决了.如果按照上面的修改还是不能解决的话,就要考虑到返回的数据类型是否匹配.
  • vue中checkbox复选框数据回显,给复选框添加选中操作 记性不好,所以记录下来也供自己今后查看 前端html及js 主要用到的就是vue里面的v-model指令。 本质上<input :value="test" />就是<input @input=...
  • ElementUi Table复选框回显

    千次阅读 2020-10-10 18:17:01
    ElementUi Table复选框回显 UI代码: <el-table :data="acctSettleHangAccountList" style="width:700px;" height="300" ref="multipleTable" tooltip-effect="dark" @selection-change=...
  • el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如:如果lable直接设置为整个item,则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值,则v-model绑定的数组里的...
  • vue el-checkbox 回显失效 踩坑

    万次阅读 2018-11-28 21:30:20
    回显el-checkbox checked 失效  如果后端返回的数据为int类型 : 1或 0  checked 失效。 如果后端返回数据经过object.assign() checked 失效 &lt;template slot-scope="scope" &gt; &...
  • <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-...
  • el-table标签添加ref=“tables”属性,第一列复选框标签上添加reserve-selection属性 2、定义一个方法,将后端返给我们的list数据传参 这里的this.returnDatas是一个数组,里面是已有的两条数据的id 将已有的两...
  • jq复选框回显

    2021-08-30 10:04:06
     //用el表达式获取在控制层存放的复选框的值为字符串类型 var holiday = holidaylist.split(','); $.each(holiday, function(index, holidayId){ holidayObj.each(function () { if($(this).val() == ...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 334
精华内容 133
关键字:

el-checkbox复选框的回显