vue3+Elament Plus開發:Element Plus多選框 TypeScript 下報錯修復
阿新 • • 發佈:2020-12-13
技術標籤:前端vue3vue3element-plustypescript前端
vue3+Elament Plus開發:Element Plus多選框 TypeScript 下報錯修復
問題描述
Element Plus 的多選框,根據官方文件的示例,在 ts 模式下是無法執行的;
既然用了VUE3,那我們就用VUE3的寫法改寫下。
官方程式碼示例
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全選</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city} }</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '廣州', '深圳'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
} ;
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
改寫後的程式碼示例
預設全選:
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from 'vue'
const cityOptions = ['上海', '北京', '廣州', '深圳'];
export default {
setup () {
const data = reactive({
checkAll: true,
checkedCities: cityOptions,
cities: cityOptions,
isIndeterminate: false,
handleCheckAllChange: (val: boolean) => {
data.checkedCities = val ? cityOptions : []
data.isIndeterminate = false
},
handleCheckedTagsChange (value: string) {
const checkedCount = value.length
data.checkAll = checkedCount === data.cities.length
data.isIndeterminate = checkedCount > 0 && checkedCount < data.cities.length
}
})
const refData = toRefs(data)
return {
...refData
}
}
};
</script>