代码
/**
* @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>