标签：function 控件 val 自定义 下拉多 item dataSource checkedProp selectedAll

网上看了别人写的控件，bug太多，于是仿着自己写了一个

控件：checkableSelect.vue

<template>
  <el-select v-bind="$attrs" v-model="selectedValue" multiple @change="changeSelect">
    <el-option v-if="dataSource.length" label="全选" :value="selectAll">
      <el-checkbox v-model="selectedAll" @click.prevent.native>全选</el-checkbox>
    </el-option>
    <el-option v-for="item in dataSource" :key="item[valueProp]" :label="item[textProp]" :value="item[valueProp]">
      <el-checkbox v-model="item[checkedProp]" @click.prevent.native>{{item[textProp]}}</el-checkbox>
    </el-option>
  </el-select>
</template>

<script>
  import Linq from "linq";
  export default {
    name: "checkableSelect",
    model: {
      event: "change"
    },
    props: {
      value: Array,
      source: Array,
      textProp: String,
      valueProp: String,
      checkedProp: String
    },
    data() {
      return {
        selectAll: this.newGuid(),
        selectedAll: false
      }
    },
    computed: {
      selectedValue: {
        get: function () {
          return this.value;
        },
        set: function (val) {
          if (val.includes(this.selectAll))
              this.selectedAll = !this.selectedAll;
            
          this.dataSource.forEach(item => {
            if (val.includes(this.selectAll)) {
              item[this.checkedProp] = this.selectedAll;
            }
            else {
              if (val.includes(item[this.valueProp]))
                item[this.checkedProp] = true;
              else
                item[this.checkedProp] = false;
            }
          });

          if(Linq.from(this.dataSource).all(item=> item[this.checkedProp] == true ))
            this.selectedAll = true;
          else
            this.selectedAll = false;
          this.$forceUpdate();
        }
      },
      dataSource: {
        get: function () {
          return this.source;
        },
        set: function (val) {
          //debugger
        }
      }
    },
    watch: {
      selectedValue: function (newValue) {
        //debugger
      },
      dataSource: function (newValue) {
        //debugger
        if(this.dataSource.length > 0 
          && Linq.from(this.dataSource).all(item=> item[this.checkedProp] == true ))
            this.selectedAll = true;
          else
            this.selectedAll = false;
      }
    },
    created() {

    },
    methods: {
      changeSelect(val) {
        var values = Linq.from(this.dataSource).where(x => x[this.checkedProp]).select(x => x[this.valueProp]).toArray();
        this.$emit("change", values);
      },
      newGuid() {
        return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {
          var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
          var result = v.toString(16);
          return result;
        });
      }
    }
  }
</script>

使用：

import checkableSelect from "../tools/checkableSelect"

<checkableSelect style="width:100%;" v-model="gradesViewModel" :source="grades" @change="gradesChange"
                                    :textProp="'label'" :valueProp="'value'" placeholder="请选择适用年级">
                                </checkableSelect>

标签：function,控件,val,自定义,下拉多,item,dataSource,checkedProp,selectedAll
来源： https://www.cnblogs.com/nanfei/p/16532033.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。