Blame view

components/ncc/ncc-checkbox/index.vue 1.38 KB
290144e9   易尊强   第一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  <template>
  	<u-checkbox-group @change="onChange" :disabled="disabled">
  		<u-checkbox v-model="item.checked" v-for="(item, index) in newOptions" :key="index" :name="item[props.value]">
  			{{ item[props.label] }}
  		</u-checkbox>
  	</u-checkbox-group>
  </template>
  
  <script>
  	export default {
  		name: 'ncc-checkbox',
  		model: {
  			prop: 'value',
  			event: 'input'
  		},
  		props: {
  			value: {
  				type: Array,
  				default: () => []
  			},
  			options: {
  				type: Array,
  				default: () => []
  			},
  			props: {
  				type: Object,
  				default: () => ({
  					label: 'fullName',
  					value: 'id'
  				})
  			},
  			disabled: {
  				type: Boolean,
  				default: false
  			}
  		},
  		data() {
  			return {
  				newOptions: [],
  			}
  		},
  		watch: {
  			value(val) {
  				this.setDefault()
  			},
  			options(val) {
  				this.setColumnData()
  			}
  		},
  		created() {
  			this.setColumnData()
  		},
  		methods: {
  			onChange(value) {
  				this.$emit('input', value)
  			},
  			setColumnData() {
  				this.newOptions = this.options.map(o => ({
  					...o,
  					checked: false
  				}))
  				this.setDefault()
  			},
  			setDefault() {
  				if (!this.value.length) return
  				outer: for (let i = 0; i < this.value.length; i++) {
  					inner: for (let j = 0; j < this.newOptions.length; j++) {
  						if (this.value[i] === this.newOptions[j][this.props.value]) {
  							this.newOptions[j].checked = true
  							break inner
  						}
  					}
  				}
  			}
  		}
  	}
  </script>