1、需求： 几乎每个页面的每一个表格都使用到自定义表头字段，点击表格最后一列的图标，弹出表头所有可展示的字段：
2、父组件只需传全部可展示的表头数据即可（数组格式），具体代码：
<template>
<div class="common-box">
<div class="content-box">
<div class="assetManagement" v-show="!showDetail">
<div class="table-box">
<a-table
:columns="state.columns"
:row-key="(record) => record.id"
:data-source="state.dataSource"
:loading="loading"
:pagination="false"
>
<template #setTableTitle>
<a-tooltip>
<template #title>设置</template>
<span @click="handleTableHead" class="table-head-btn"><SettingOutlined /></span>
</a-tooltip>
</template>
<template #action="{ text }">
<a-tooltip>
<template #title>操作</template>
<a-popover title="" trigger="click" :visible="showBtn == text.region" @visibleChange="handleShowBtn(text)">
<template #content>
<div class="action-box" style="display: flex; flex-direction: column;">
<a @click="handleDetail(text)">查看详情</a>
</div>
</template>
<MenuOutlined />
</a-popover>
</a-tooltip>
</template>
</a-table>
</div>
</div>
<a-modal
class="table-head-modal"
:visible="tableHeadPop"
title="列表视图设置"
:confirmLoading="tableHeadLoading"
:width="750"
@cancel="handleCancel"
>
<table-head-content
ref="tableHeadRef"
:columns="state.setColumns"
></table-head-content>
<template #footer>
<div class="pop-btn-box">
<div class="btn-left">
<a-button @click="checkAll">全选</a-button>
<a-button @click="checkNoAll">全不选</a-button>
</div>
<div class="btn-right">
<a-button @click="handleCancel">返回</a-button>
<a-button type="primary" @click="handleOk" class="ok-btn">确定</a-button>
</div>
</div>
</template>
</a-modal>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, toRaw, getCurrentInstance, reactive, nextTick, computed } from "vue";
import { request } from "@/utils/request.js";
import {
ExclamationCircleOutlined,
SettingOutlined,
MenuOutlined
} from "@ant-design/icons-vue";
import { useStore } from 'vuex';
const store = useStore();
const globalProperties =
getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const http = globalProperties.$http;
const loading = ref(false);
const showDetail = ref(false);
const tableHeadPop = ref(false);
const tableHeadLoading = ref(false);
const showBtn = ref("");
const tableHeadRef = ref(null);
const state = reactive({
dataSource: [],
manufactorList: [],
siteTypeList: [],
regionList: [],
columns: [
{
title: "区域",
dataIndex: "region",
},
{
title: "数量",
dataIndex: "assetsNum",
sorter: (a, b) => {
return a.assetsNum - b.assetsNum
},
},
{
title: "已安装",
dataIndex: "installNum",
sorter: (a, b) => {
return a.installNum - b.installNum
},
},
],
columnsAll: [
{
title: "区域",
dataIndex: "region",
ellipsis: true,
},
{
title: "数量",
dataIndex: "assetsNum",
sorter: (a, b) => {
return a.assetsNum - b.assetsNum
},
ellipsis: true,
},
{
title: "已安装",
dataIndex: "installNum",
sorter: (a, b) => {
return a.installNum - b.installNum
},
ellipsis: true,
},
{
title: "未安装",
dataIndex: "notInstall",
sorter: (a, b) => {
return a.notInstall - b.notInstall
},
ellipsis: true,
},
],
setColumns: []
});
const detailRef = ref(null);
state.siteTypeList = computed( () => store.state.siteTypeList);
state.regionList = computed( () => store.state.regionList);
state.manufactorList = computed( () => store.state.manufactorList);
// 获取表格数据
const getTableData = () => {
loading.value = true;
if(state.columns.length && (state.columns[state.columns.length -1].key != "setItem")) {
state.columns.push({
key: "setItem", // 不可使用dataIndex, 会导致操作拿不到当前行的数据
width: 60,
slots: {
title: "setTableTitle",
customRender: "action",
},
})
}
request(http.GET_DEVICE_ASSET_MANAGE_LIST, "get")
.then((res) => {
loading.value = false;
state.dataSource = res;
if(state.dataSource.length > 0) {
state.dataSource.map((item, index) => {
item.id = index;
})
}
})
.catch(() => {
loading.value = false;
});
};
const handleShowBtn = (text) => {
showBtn.value = text.region;
}
// 点击查看详情
const handleDetail = (text) => {
showDetail.value = true;
showBtn.value = ""; // 隐藏按钮小弹窗
// 触发子组件请求数据的方法
nextTick(() => {
detailRef.value.setValue(text.region);
})
};
// 点击动态设置表头
const handleTableHead = () => {
tableHeadPop.value = true;
nextTick(() => {
tableHeadRef.value.setValues(state.columnsAll);
});
state.setColumns = state.columns;
let num = state.setColumns.length - 1;
state.setColumns = toRaw(state.setColumns).slice(0, num); // 把设置那行去掉
};
// 全选
const checkAll = () => {
nextTick(() => {
tableHeadRef.value.checkAllSon();
})
};
// 全不选
const checkNoAll = () => {
nextTick(() => {
tableHeadRef.value.checkNoAllSon();
})
};
const handleCancel = () => {
tableHeadPop.value = false;
};
const handleOk = async() => {
let arr = await tableHeadRef.value.getValues();
if(arr.length) {
tableHeadPop.value = false;
state.columns = arr;
getTableData();
}
};
onMounted(() => {
getTableData();
});
</script>
<style lang="less" scoped>
.assetManagement {
height: 100%;
padding: 0.1rem;
}
</style>
3、主要代码在这块：
nextTick(() => {
tableHeadRef.value.setValues(state.columnsAll);
});
4、开始封装， 因为设计到选中样式，所以自己添加了checked属性，在子组件中定义一个变量，接收父组件通过参数传过来的数组
<template>
<div class="table-head-content">
<a-checkbox-group
v-model:value="state.checkedList"
name="checkboxgroup"
@change="onChange"
>
<ul class="check-ul">
<li v-for="(item, index) in state.columnsAll" :key="index" class="check-li" :class="{'isChecked': item.checked}">
<a-checkbox :value="item.title" @change="getCheckOne">
<span class="commonCode checkCode">{{ item.title }}</span>
</a-checkbox>
</li>
</ul>
</a-checkbox-group>
</div>
</template>
<script setup>
import { reactive, toRaw, getCurrentInstance } from "vue";
import { getJsonArrEqual } from "@/utils/common";
const globalProperties = getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const toast = globalProperties.$toast;
const props = defineProps({
columns: Array,
});
const state = reactive({
checkedList: [],
columnsAll: []
});
// 初始化
const setValues = (columnsAll) => {
state.checkedList = [];
state.columnsAll = columnsAll
let newArr = getJsonArrEqual(toRaw(props.columns), state.columnsAll); // 获取相同项
state.columnsAll.forEach(i => { // 初始化checked属性
i.checked = false;
})
state.columnsAll.forEach(item => {
newArr.map(i => {
if(item.title == i.title) {
item.checked = true; // 初始化选中的checked值
state.checkedList.push(i.title);
}
})
});
};
// 选中
const onChange = (check) => {
state.checkedList = check;
};
// 单个选中
const getCheckOne = (e) => {
state.columnsAll.forEach((item, index) => {
if(item.title == e.target.value) {
state.columnsAll[index].checked = e.target.checked; // 根据选中与否赋值
}
})
};
// 获取选中
const getValues = () => {
return new Promise((resolve, reject) => {
if(state.checkedList.length >= 3) { // 必须选择三项或者三项以上
let arr = [];
state.checkedList.forEach(item => {
state.columnsAll.map(i => {
if(i.title == item) {
arr.push(i);
}
})
})
resolve(arr);
} else {
toast('必须选中三项或者三项以上喔！')
reject([]);
}
})
};
// 全选
const checkAllSon = () => {
if(state.columnsAll.length) {
state.checkedList = []; // 防止叠加
state.columnsAll.map(i => {
state.checkedList.push(i.title);
return i.checked = true;
})
}
};
// 全不选
const checkNoAllSon = () => {
state.checkedList = [];
state.columnsAll.map(i => {
return i.checked = false;
})
};
defineExpose({
setValues,
getValues,
checkAllSon,
checkNoAllSon
})
</script>
<style lang="less" scoped>
.table-head-content {
.check-ul {
display: flex;
flex-wrap: wrap;
.check-li {
padding: 2px 8px;
border-radius: 4px;
margin-right: .1rem;
margin-bottom: .1rem;
white-space: nowrap;
::v-deep(.ant-checkbox-wrapper) {
width: 200px;
}
&:hover {
background: @table-head-set-bg;
}
}
.isChecked {
background: @table-head-set-bg;
}
}
};
</style>
5、此组件用到两个Json数组取相同项的方法，详见我另一篇文章：https://blog.csdn.net/agua001/article/details/123321784?spm=1001.2014.3001.5502
6、把公用组件放到src/components/common
7、在main.js中注册成全局组件
import tableHeadContent from './components/common/tableHeadContent.vue'
const app = createApp(App)
app.component('table-head-content', tableHeadContent);
app.use(antd).use(router).use(store).mount('#app')
8、在组件中不用引入，直接使用，官方文档：https://v3.cn.vuejs.org/guide/component-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C
<table-head-content />