feat: 新增自定义 table 的 Dialog 中全选功能

This commit is contained in:
zhaojisen
2024-05-08 19:06:06 +08:00
committed by 老广
parent 8a6459e828
commit 68563a198d
2 changed files with 51 additions and 3 deletions

View File

@@ -10,10 +10,15 @@
@cancel="restoreDefault()"
@confirm="handleColumnConfirm()"
>
<label>{{ this.$t('TableColSetting') }}</label>
<el-col style="margin-bottom: 5px">
<label>{{ this.$t('TableColSetting') }}</label>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="float: right" @change="handleCheckAllChange">全选</el-checkbox>
</el-col>
<el-checkbox-group
v-model="iCurrentColumns"
class="column-setting"
@change="handleCheckedChange"
>
<el-row>
<el-col
@@ -55,6 +60,10 @@ export default {
type: Array,
default: () => []
},
defaultColumns: {
type: Array,
default: () => []
},
url: {
type: String,
default: ''
@@ -62,16 +71,34 @@ export default {
},
data() {
return {
checkAll: false,
showColumnSettingPopover: false,
iCurrentColumns: ''
iCurrentColumns: '',
isIndeterminate: false
}
},
watch: {
currentColumns: {
handler(val) {
this.iCurrentColumns = val
}
}
},
mounted() {
this.$eventBus.$on('showColumnSettingPopover', ({ url }) => {
if (url === this.url) {
this.checkAll = false
this.showColumnSettingPopover = true
this.iCurrentColumns = this.currentColumns
}
if (this.iCurrentColumns.length === this.totalColumnsList.length) {
this.checkAll = true
this.isIndeterminate = false
} else {
this.checkAll = false
this.isIndeterminate = true
}
})
},
methods: {
@@ -82,6 +109,22 @@ export default {
restoreDefault() {
this.showColumnSettingPopover = false
this.$emit('columnsUpdate', { columns: null, url: this.url })
},
handleCheckAllChange(value) {
if (value) {
this.iCurrentColumns = this.totalColumnsList.reduce((prev, item) => {
return [...prev, (item.prop)]
}, [])
this.isIndeterminate = false
} else {
this.iCurrentColumns = this.defaultColumns
this.isIndeterminate = true
}
},
handleCheckedChange(value) {
const checkedCount = value.length
this.checkAll = checkedCount === this.totalColumnsList.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.totalColumnsList.length
}
}
}

View File

@@ -13,6 +13,7 @@
:current-columns="popoverColumns.currentCols"
:min-columns="popoverColumns.minCols"
:total-columns-list="popoverColumns.totalColumnsList"
:default-columns="popoverColumns.defaultCols"
:url="config.url"
@columnsUpdate="handlePopoverColumnsChange"
/>
@@ -58,7 +59,8 @@ export default {
popoverColumns: {
totalColumnsList: [],
minCols: [],
currentCols: []
currentCols: [],
defaultCols: []
}
}
},
@@ -426,6 +428,8 @@ export default {
})
this.popoverColumns.currentCols = this.cleanedColumnsShow.show
this.popoverColumns.minCols = this.cleanedColumnsShow.min
this.popoverColumns.defaultCols = this.cleanedColumnsShow.default
this.$log.debug('Popover cols: ', this.popoverColumns)
},
handlePopoverColumnsChange({ columns, url }) {
@@ -434,6 +438,7 @@ export default {
columns = this.cleanedColumnsShow.default
}
this.popoverColumns.currentCols = columns
const _tableConfig = localStorage.getItem('tableConfig')
? JSON.parse(localStorage.getItem('tableConfig'))
: {}