如图：
1.index.vue 页面
<template>
<el-table
:data="tableData"
style="width: 100%"
height="78vh"
:header-cell-style="{
background: '#f4f4f4',
padding: 0,
height: '32px',
'text-align': 'center',
color: '#222',
'font-weight': 'bold',
}"
:cell-style="{ padding: 0, height: '26px' }"
border
highlight-current-row
>
<template v-for="(item, current) in tableConfig">
<el-table-column
align="center"
:key="current"
:prop="item.prop"
:label="item.label"
v-if="item.type"
>
<template slot="header">
<custom-header
:configItem="item"
@inputEnterClick="handleInputEnterClick"
@changeDateClick="handleChangeDateClick"
@changeCheck="handleChangeCheck"
>
</custom-header>
</template>
<template slot-scope="scope">
<template v-if="item.prop === 'date'">
<span>{
{ scope.row[item.prop].slice(0, 10) }}</span>
<!-- <span>{
{ scope.row[item.prop] | formatTime }}</span> -->
</template>
<template v-else>
<span>{
{ scope.row[item.prop] }}</span>
</template>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
import customHeader from "./children/customHeader.vue";
import { tableConfig } from "./config/tableConfig";
export default {
components: { customHeader },
data() {
return {
tableData: [
{
date: "2016-05-02 12:13:14",
name: "王小虎",
type: "商品类型",
model: "型号规格",
unit: "单位",
unitPrice: "成本单价",
},
{
date: "2016-05-02 12:13:14",
name: "王小虎",
type: "商品类型",
model: "型号规格",
unit: "单位",
unitPrice: "成本单价",
},
],
tableConfig: [],
};
},
created() {
this.tableConfig = tableConfig;
},
methods: {
handleInputEnterClick(item) {
console.log(item);
},
handleChangeDateClick(date) {
console.log(date);
},
handleChangeCheck(item) {
console.log(item);
},
},
};
</script>
<style></style>
2.customHeader.vue 页面
<template>
<el-popover
placement="bottom"
width="200"
trigger="hover"
popper-class="popperOptions"
>
<!-- 根据传递的类型展示对应的组件 -->
<template v-if="configItem.type === 'input'">
<el-input
class="_update-table-input"
v-model="configItem.field"
:placeholder="configItem.hint"
@keyup.enter.native="handleEnterClick(configItem)"
></el-input>
</template>
<template v-else-if="configItem.type === 'date'">
<el-date-picker
class="_update-table-daterange"
v-model="configItem.field"
type="date"
:placeholder="configItem.hint"
value-format="yyyy-MM-dd"
@change="handleChangeDate(configItem)"
>
</el-date-picker>
</template>
<template v-else-if="configItem.type === 'range'">
<div class="range">
<el-input
class="_update-table-input"
v-model="configItem.start"
placeholder="最小值"
@keyup.enter.native="handleEnterClick(configItem)"
></el-input>
<span>~</span>
<el-input
class="_update-table-input"
v-model="configItem.end"
placeholder="最大值"
@keyup.enter.native="handleEnterClick(configItem)"
></el-input>
</div>
</template>
<template v-else-if="configItem.type === 'switch'">
<div class="switch">
<el-switch
v-model="configItem.check"
@change="handleChangeCheck(configItem)"
>
</el-switch>
<span v-if="!configItem.check">未审核</span>
<span v-else>已审核</span>
</div>
</template>
<!-- table 头部-->
<span slot="reference" v-if="configItem.type"
>{
{ configItem.label }} <i class="el-icon-arrow-down"></i
></span>
<span slot="reference" v-else>{
{ configItem.label }}</span>
</el-popover>
</template>
<script>
export default {
props: {
configItem: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {
value: true,
};
},
created() {
// console.log(this.configItem);
},
methods: {
handleChangeDate(item) {
this.$emit("changeDateClick", item);
},
handleEnterClick(item) {
// console.log(item);
if (item.type !== "range") {
if (!item.field) return this.$message.error(`请输入${item.label}`);
}
this.$emit("inputEnterClick", item);
// item.field = "";
},
handleChangeCheck(item) {
this.$emit("changeCheck", item);
},
},
};
</script>
<style lang="less" scoped>
.range {
// margin-top: 8px;
display: flex;
justify-content: space-between;
text-align: center;
height: 32px;
line-height: 32px;
.el-input {
width: 85px;
/deep/.el-input__inner {
width: 85px;
height: 32px;
}
}
}
&._update-table-daterange {
width: 200px !important;
padding: 0px 0px !important;
height: 34px !important;
line-height: 34px !important;
.el-input__inner {
height: 32px;
}
.el-input__prefix {
.el-input__icon {
line-height: 32px;
}
}
.el-input__suffix {
.el-input__suffix-inner {
.el-input__icon {
line-height: 35px;
}
}
}
}
.switch {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
// background-color: rebeccapurple;
span {
margin: 0 10px;
}
}
</style>
3.tableConfig配置（可以自己进行配置）
export const tableConfig = [
// {
// field: "", // 绑定的值
// label: "客户编号", // table-column label
// prop: "date", // table-column prop
// type: "range", // 展示的类型
// hint: "搜索 按Enter确认", // 提示文字
// receivableMoneyByStatic: "", // 最小值
// receivableMoneyByEnd: "", // 最大值
// },
{
field: "",
label: "日期",
prop: "date",
type: "date",
hint: "搜索 按Enter确认",
},
{
field: "",
label: "姓名",
prop: "name",
type: "input",
hint: "搜索 按Enter确认",
},
{
field: "",
label: "商品类型",
prop: "type",
type: "input",
hint: "搜索 按Enter确认",
},
{
field: "",
label: "型号规格",
prop: "model",
type: "input",
hint: "搜索 按Enter确认",
},
{
field: "",
label: "单位",
prop: "unit",
type: "input",
hint: "搜索 按Enter确认",
},
{
label: "成本单价",
prop: "unitPrice",
type: "range",
hint: "搜索 按Enter确认",
start: "", // 最小值
end: "", // 最大值
},
];