element ui checkbox實現多項全選反選功能
阿新 • • 發佈:2021-01-19
<!-- 說明 --> <!-- @author ex-jinming002--> <script> export default { name: 'Overall', data() { return { // 頂部全選所有狀態 checkAll: false, isIndeterminate: false, checkBoxData: [], testData: [ { title: '基本資訊:', options: [{ label:'存在問題', value: 'laborum officia' }], }, { title: '預計進展詳情:', options: [ { label: '預計土地盤整年份', value: 'nostrud fugiat', }, { label: '是否計劃本年度開工', value: 'aliqua' }, { label: 'in deserunt', value: 'mollit sed' }, ], }, { title: '實際進展詳情:', options: [ { label: '簽約時間', value: 'consectetur proident' }, { label: '用地面積(公頃)', value: 'dolor et qui cupidatat' }, { label: '開工時間', value: 'dolore ut occaecat non cillum' }, ], }, { title:'中止專案:', options: [ { label: '中止原因', value: 'exercitation ut' }, { label: '土地實際盤整面積', value: 'amet' }, { label: '是否計劃盤整', value: 'Excepteur esse in' }, ], }, ], } }, mounted() { const tempArr = [] this.testData.forEach(item => { tempArr.push({ // 子項的全選狀態 checkAll: false, // 子項的預設選中的checkbox checkedCities: [], isIndeterminate: false, options: item.options, title: item.title, }) }) console.log(this.checkBoxData, '遍歷之前的') this.checkBoxData = tempArr console.log(this.checkBoxData, '遍歷之hou的') }, methods: { // 全選所有子項 handleCheckAll(val) { this.checkBoxData.forEach((item, index) => { this.handleCheckAllChange(val, index) this.checkBoxData[index].checkAll = val }) }, // 子項的全選change事件 handleCheckAllChange(val, index) { console.log(val) this.checkBoxData[index].checkedCities = (val ? this.checkBoxData[index].options : [] ).map(item => item.value) this.checkBoxData[index].isIndeterminate = false this.TopCheckBoxCheck() }, // 子項change事件 handleCheckedCitiesChange(value, index) { console.log(this.checkBoxData[index].checkedCities) const checkedCount = value.length this.checkBoxData[index].checkAll = checkedCount === this.checkBoxData[index].options.length this.checkBoxData[index].isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxData[index].options.length this.TopCheckBoxCheck() }, TopCheckBoxCheck() { const allSelectLen = this.checkBoxData.filter(item => item.checkAll) .length if (allSelectLen === this.checkBoxData.length) { this.checkAll = true this.isIndeterminate = false } else { this.checkAll = false this.isIndeterminate = this.checkBoxData.findIndex(item => item.isIndeterminate) >= 0 || this.checkBoxData.findIndex(item => item.checkAll) >= 0 } }, handleCheck() { const res = this.checkBoxData.map(item => { if (item.checkedCities && item.checkedCities.length > 0) { return item.checkedCities } }) console.log(res.flat()) const result = res .flat() .filter(item => { if (item) { return item } }) .join() console.log(result) }, }, } </script> <template> <section class="Overall" v-if="checkBoxData && checkBoxData.length > 0"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll" >全選</el-checkbox > <br /><br /><br /> <div v-for="(item, index) in checkBoxData" :key="index"> <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change=" val => { handleCheckAllChange(val, index) } " >{{ item.title }}</el-checkbox > <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="item.checkedCities" @change=" val => { handleCheckedCitiesChange(val, index) } " > <el-checkbox v-for="option in item.options" :label="option.value" :key="option.value" >{{ option.label }}</el-checkbox > </el-checkbox-group> <br /> <br /> <br /> </div> <br /><br /><br /> <el-button :style="{ 'margin-left': '100px' }" @click="handleCheck" >提交</el-button > </section> </template> <style lang="less"> .Overall { } </style>