共计 7181 个字符，预计需要花费 18 分钟才能阅读完成。
起因：因为 elementui 的表格没有做动静渲染表头的操作，本人封装了一个
步骤一：建设 vue 组件
<template>
<div class="operate-btn">
<el-button class="o-ml-12" icon="el-icon-s-operation" v-preventReClick type="success" size="mini" @click="headFilterShow"
> 显示项调整 </el-button
>
<!-- 筛选穿梭框 -->
<el-dialog :close-on-click-modal="false" v-dialogDrag :visible.sync="headFilter.visible" title="显示项调整" width="536px">
<el-form label-position="right" label-width="100px" :model="coefficientAdjustShowForm">
<el-form-item label="测试字段：">
<el-checkbox
:indeterminate="coefficientAdjustShowForm.options1IsInde"
v-model="coefficientAdjustShowForm.option1CheckAll"
@change="option1CheckAllChg"
> 全选 </el-checkbox
>
<el-checkbox-group @change="options1CheckChg" v-model="coefficientAdjustShowForm.options1">
<el-checkbox v-for="item in headerShowList.option1" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="试验字段：">
<el-checkbox
:indeterminate="coefficientAdjustShowForm.options2IsInde"
v-model="coefficientAdjustShowForm.option2CheckAll"
@change="option2CheckAllChg"
> 全选 </el-checkbox
>
<el-checkbox-group @change="options2CheckChg" v-model="coefficientAdjustShowForm.options2">
<el-checkbox v-for="item in headerShowList.option2" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-preventReClick @click="headFilter.visible = false"> 取 消 </el-button>
<el-button v-preventReClick type="primary" @click="handleClickUpdateThead"> 确 定 </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'tableHeadAdjust',
props: ['tableData', 'headerShowList', 'headFilter', 'curThis'],
data() {
return {
coefficientAdjustShowForm: {options1: [],
options2: [],
option1CheckAll: false,
option2CheckAll: false,
options1IsInde: true,
options2IsInde: true
}
};
},
methods: {
// 单选
options1CheckChg(value) {
let checkedCount = value.length;
this.coefficientAdjustShowForm.option1CheckAll = checkedCount === this.headerShowList.option1.length;
this.coefficientAdjustShowForm.options1IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option1.length;
},
options2CheckChg(value) {
let checkedCount = value.length;
this.coefficientAdjustShowForm.option2CheckAll = checkedCount === this.headerShowList.option2.length;
this.coefficientAdjustShowForm.options2IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option2.length;
},
// 全选
option1CheckAllChg(val) {this.coefficientAdjustShowForm.options1 = val ? this.headerShowList.option1 : [];
this.coefficientAdjustShowForm.options1IsInde = false;
},
option2CheckAllChg(val) {this.coefficientAdjustShowForm.options2 = val ? this.headerShowList.option2 : [];
this.coefficientAdjustShowForm.options2IsInde = false;
},
headFilterShow() {
this.curThis.headFilter.visible = true;
// 解决点击 CheckBox 时候，动静扭转了表头的数值
this.$nextTick(() => {
this.coefficientAdjustShowForm.options1 = this.curThis.headFilter.value.option1;
this.coefficientAdjustShowForm.options2 = this.curThis.headFilter.value.option2;
this.options1CheckChg(this.coefficientAdjustShowForm.options1);
this.options2CheckChg(this.coefficientAdjustShowForm.options2);
});
},
handleClickUpdateThead() {
// 当表头数据特地多的时候清空 table 数据，解决卡顿问题
// this.curThis.tableData = [];
// 排序
let list1 = [];
let option1 = this.curThis.headerShowList.option1;
if (option1.length > 0) {option1.forEach((item) => {if (this.coefficientAdjustShowForm.options1.length > 0) {this.coefficientAdjustShowForm.options1.forEach((item1) => {if (item == item1) {list1.push(item);
}
});
}
});
}
let list2 = [];
let option2 = this.curThis.headerShowList.option2;
if (option2.length > 0) {option2.forEach((item) => {if (this.coefficientAdjustShowForm.options2.length > 0) {this.coefficientAdjustShowForm.options2.forEach((item1) => {if (item == item1) {list2.push(item);
}
});
}
});
}
this.curThis.headFilter.value.option1 = list1;
this.curThis.headFilter.value.option2 = list2;
// 贮存到 storage 外面
this.curThis.king_setConceal(this.curThis.$route.path, this.curThis.headFilter.value);
this.headFilter.visible = false;
// // 触发扭转
// this.$emit('headFilterShowChg');
}
}
};
</script>
<style>
</style>步骤二：建设 vue 单页面
<template>
<div>
<tableHeadAdjust :tableData="tableData" :headerShowList="headerShowList" :headFilter="headFilter" :curThis="this"></tableHeadAdjust>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<!-- 形式一：同一级表头 -->
<!-- <el-table-column v-for="(item, index) in headFilter.value.option1" :key="index +'option1'":label="item":prop="tableHeadeTryList[item]">
</el-table-column>
<el-table-column v-for="(item, index) in headFilter.value.option2" :key="index +'option2'":label="item":prop="tableHeadTestList[item]">
</el-table-column> -->
<!-- 形式二：父子表头 -->
<el-table-column v-for="(item, index) in headFilter.value.option1" :key="index +'option1'":label="item">
<el-table-column
v-for="(item, index) in headFilter.value.option2"
:key="index +'option2'":label="item":prop="tableHeadTestList[item]"
>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
import tableHeadAdjust from '@/components/tableHeadAdjust.vue';
export default {
name: 'sysIndex',
components: {tableHeadAdjust},
data() {
return {tableData: [],
headFilter: {
visible: false,
value: {option1: [],
option2: []}
},
headerShowList: {option1: ['测试 1', '测试 2', '测试 3', '测试 4', '测试 5', '测试 6', '测试 7'],
option2: ['试验 1', '试验 2', '试验 3', '试验 4', '试验 5', '试验 6', '试验 7']
}
};
},
computed: {tableHeadeTryList() {
return {
测试 1: 'try1',
测试 2: 'try2',
测试 3: 'try3',
测试 4: 'try4',
测试 5: 'try5',
测试 6: 'try6',
测试 7: 'try7'
};
},
tableHeadTestList() {
return {
试验 1: 'test1',
试验 2: 'test2',
试验 3: 'test3',
试验 4: 'test4',
试验 5: 'test5',
试验 6: 'test6',
试验 7: 'test7'
};
}
},
mounted() {
// userMark 为了辨别是哪个用户的表头，您能够依据手机号或者 id 用户的惟一标识来做
localStorage.setItem('userMark', 'userMark1');
// 初始化表格表头
this.king_tableConceal(this);
this.tableData = [
{
date: '2016-05-02',
name: '王小虎',
try1: '好的 1',
try2: '好的 2',
try3: '好的 3',
try4: '好的 4',
try5: '好的 5',
try6: '好的 6',
try7: '好的 7',
test1: '没方法 1',
test2: '没方法 2',
test3: '没方法 3',
test4: '没方法 4',
test5: '没方法 5',
test6: '没方法 6',
test7: '没方法 7'
},
{
date: '2016-05-04',
name: '王小虎',
try1: '好的 1',
try2: '好的 2',
try3: '好的 3',
try4: '好的 4',
try5: '好的 5',
try6: '好的 6',
try7: '好的 7',
test1: '没方法 1',
test2: '没方法 2',
test3: '没方法 3',
test4: '没方法 4',
test5: '没方法 5',
test6: '没方法 6',
test7: '没方法 7'
}
];
},
methods: {
/*
reson: 上面这些办法能够放到全局办法外面方便使用
author:king 之浪迹天涯
*/
/*
* 初始化表格显示暗藏项
*/
king_tableConceal(curThis) {let headerShowList = curThis.king_getConceal(curThis.$route.path);
curThis.headFilter.value = headerShowList ? headerShowList : {option1: curThis.headerShowList.option1, option2: curThis.headerShowList.option2};
},
/**
* 获取用户表格显示暗藏项
* @param path
*/
king_getConceal(path) {let USER_ID = localStorage.getItem('userMark');
let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST');
USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {};
if (USER_TABLEHEADADUST.hasOwnProperty(USER_ID) && USER_TABLEHEADADUST[USER_ID].hasOwnProperty(path))
return USER_TABLEHEADADUST[USER_ID][path];
return '';
},
/**
* 存储用户表格显示暗藏项
* @param path、theader
*/
king_setConceal(path, conceal) {
// userMark 为了辨别是哪个用户的表头，您能够依据手机号或者 id 用户的惟一标识来做
let USER_ID = localStorage.getItem('userMark');
let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST');
USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {};
if (!USER_TABLEHEADADUST.hasOwnProperty(USER_ID)) {USER_TABLEHEADADUST[USER_ID] = {[path]: conceal
};
} else {USER_TABLEHEADADUST[USER_ID][path] = conceal;
}
localStorage.setItem('USER_TABLEHEADADUST', JSON.stringify(USER_TABLEHEADADUST));
}
}
};
</script>
<style></style>
正文完
发表至： element-ui
2022-08-17
