vue-element 动态单选多选全选

Posted 2021-01-16 tsxylhs

实现效果如图

数据格式如下：

pps: [{"code":"6","createTime":"2018-09-07 00:00:00","des":"可选择居住情况","id":"6","key":"liveType","multi":false,"name":"居住情况","no":1,"status":1,"updateTime":"2018-09-07 00:00:00","usages":["condition"],"values":[{"code":"6.1","createTime":"2018-09-07 00:00:00","id":"601","name":"纯老人家庭","no":1,"propertyId":"6","status":1,"updateTime":"2018-09-27 16:53:57"},{"code":"6.3","createTime":"2018-09-07 00:00:00","id":"603","name":"独居老人","no":3,"propertyId":"6","status":1,"updateTime":"2018-09-27 16:54:06"}]},{"code":"f","createTime":"2018-09-07 00:00:00","des":"老人经济状况","id":"15","multi":true,"name":"经济状况","no":2,"status":1,"updateTime":"2018-09-07 00:00:00","usages":["condition"],"values":[{"code":"f.1","createTime":"2018-09-29 14:18:30","id":"1501","name":"低保","no":1,"propertyId":"15","status":1,"updateTime":"2018-09-29 14:18:30"},{"code":"f.2","createTime":"2018-09-29 14:18:36","id":"1502","name":"低收入","no":2,"propertyId":"15","status":1,"updateTime":"2018-09-29 14:18:36"}]}］

核心代码如下：

数据请求并初始化

  API.property.listByUsage(this.usage).then(res => {
          console.log(‘got properties‘, res.data)
          // const data = res.data.data
          var pps = res.data.data
          if (this.multi) {
            for (var i = 0; i < pps.length; i++) {
              var propCode = pps[i].code
              if (!this.result[propCode]) {
                this.$set(this.result, propCode, [])
                this.$set(this.checkAll, propCode, false)
                // this.result[propCode] = []
              }
            }
          }
          this.pps = pps
          console.log(‘pps:‘, JSON.stringify(this.pps))
        })

数据加工方法如下：

cheakLength(code) {
        for (var i = 0; i < this.pps.length; i++) {
          if (this.pps[i].code === code) {
            if (this.result[code].length === this.pps[i].values.length) {
              this.checkAll[code] = true
            } else {
              this.checkAll[code] = false
            }
          }
        }
      },
      handleCheckAllChangeProps(code) {
        var ppsValues = []
        for (var i = 0; i < this.pps.length; i++) {
          if (this.pps[i].code === code) {
            this.pps[i].values
            for (var j = 0; j < this.pps[i].values.length; j++) {
              ppsValues.push(this.pps[i].values[j].code)
            }
            this.result[code] = this.checkAll[code] ? ppsValues : []
          }
        }
      },

      handleCheckAllChange(val) {
        const streetValue = []
        for (var i = 0; i < this.streetsList.length; i++) {
          streetValue.push(this.streetsList[i].value)
        }
        this.streets = val ? streetValue : []
        this.streetIsIndeterminate = false
      },

数据渲染ｐｕｇ格式参考ｅｌ-checkbox 全选：

 .col-12.py-2.df-row-as-jsta
          .d-inline-block.label.mr-3.text-right 所属街道:
          el-checkbox(:indeterminate="streetIsIndeterminate", v-model="streetCheckAll", @change="handleCheckAllChange") 全选
          el-checkbox-group.ml-4(v-model="streets")
            el-checkbox(v-for="item in streetsList", :key="item.value", :label="item.value", :value="item.value") {{ item.name}}

      .col-12.py-2.df-row-as-jsta(v-for=‘prop in pps‘ :key="prop.code")
        .d-inline-block.label.mr-3.text-right {{ prop.name }}:
        el-checkbox.mr-3(v-model="checkAll[prop.code]" @change="handleCheckAllChangeProps(prop.code)") 全部
        el-checkbox-group.d-inline-block.d-flex.flex-row.flex-wrap(v-model="result[prop.code]", @change="cheakLength(prop.code)")
          el-checkbox(v-for="item in prop.values"  :key="item.code" :label="item.code") {{ item.name}}

粗体为核心代码