vue element ui select 复选同步组件封装

vue yekong

vue element ui select 复选

代码

/**
* @Author: 858834013@qq.com
* @Name: businessScope
* @Date: 2022-05-9
* @Desc: select同步复选
*/
<template>
  <div>
    <!--    :value="businessScope"-->
    <el-select class="w260" @change="getChange" :value="value2" multiple placeholder="请选择">
      <el-option
        v-for="item in list"
        :key="item.id"
        :label="item.businessName"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>

import { show } from '@/api/businessMain'

export default {
  name: 'businessScope',
  props: {
    value: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      list: [],
      value2: []
    }
  },
  watch: {
    value() {
      this.getValue()
    }
  },
  mounted() {
    this.getValue()
    this.getData()
  },
  methods: {
    getValue() {
      this.value2 = []
      console.log(this.value)
      console.log(123)
      if (this.value) {
        this.value2 = this.value.split(',').map(Number)
        this.$forceUpdate()
      }
    },
    getChange(e) {
      console.log(e.join(','))
      this.$emit('update:value', e.join(','))
    },
    trimSpace(array) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] == ' ' || array[i] == '' || array[i] == null || typeof (array[i]) == 'undefined') {
          array.splice(i, 1)
          i = i - 1
        }
      }
      return array
    },
    getData() {
      var that = this
      show().then((res) => {
          that.list = res.data
        }
      )
    }
  }
}
</script>

使用

<businessScope :value.sync="ruleForm.businessScopes"></businessScope>
喜欢