/* * @Author: Badguy * @Date: 2022-03-04 11:50:22 * @LastEditTime: 2022-03-15 17:56:34 * @LastEditors: your name * @Description: 航站视图表格通用部分 * have a nice day! */ export default { data() { return { // 筛选后表头 tableColsCopy: [], // 列设置弹框选中 checkedKeys: [], checkedKeysTemp: [], halfCheckedKeys: [], // 列设置弹框开关 dialogFlag: false } }, created() { this.initTableCols() }, updated() { // table数据更新 this.$nextTick(() => { this.$refs.table?.doLayout() }) }, computed: { colsCheckClass() { return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children' } }, methods: { // 列设置-初始化 initTableCols() { const that = this function setTableCols(cols) { for (const col of cols) { col.index = that.checkedKeys.length that.checkedKeys.push(that.checkedKeys.length) if (col.children?.length) { setTableCols(col.children) } } } setTableCols(this.tableCols) this.tableColsCopy = this._.cloneDeep(this.tableCols) this.checkedKeysTemp = [...this.checkedKeys] }, // 列设置-确定 handleCheck(data, checked) { this.checkedKeysTemp = [...checked.checkedKeys] this.halfCheckedKeys = [...checked.halfCheckedKeys] }, onCheck(tableDataName = 'tableData') { if (this.dialogFlag === false) { return } this.loading = true const tableDataTemp = this._.cloneDeep(this[tableDataName]) this[tableDataName] = [] this.dialogFlag = false this.checkedKeys = [...this.checkedKeysTemp] this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols)) setTimeout(() => { if (!this[tableDataName].length) { this[tableDataName] = tableDataTemp } this.loading = false }, 500) }, colsFilter(cols) { const temp = cols.filter(col => { if (this.halfCheckedKeys.includes(col.index)) { col.children = this.colsFilter(col.children) return true } else if (this.checkedKeys.includes(col.index)) { return true } return false }) return temp }, // 弹框展开 show() { this.dialogFlag = true }, // 弹框关闭 hide() { this.dialogFlag = false this.checkedKeysTemp = [...this.checkedKeys] } } }