基于el-table封装动态表头
一、实现功能
1、根据入参 可定制表头颜色 2、根据入参可定制多级表头，支持2级 3、根据入参可定制表头点击事件
实现代码如下
<template>
<div>
<!-- v-scroll="loadmore" -->
<el-table
ref="table"
stripe
:data="data"
sortable
border
v-bind="$attrs"
v-on="$listeners"
>
<template v-for="(column, index) in columns">
<!-- 正常显示 -->
<el-table-column
v-if="!column.slot"
:key="index"
align="center"
v-bind="column.attrs || {}"
>
<template v-if="column.header" slot="header">
<el-button v-if="column.isClick" type="text" @click="column.onClick">{{ column.attrs.label }} </el-button>
<span v-else :style="{color: column.color?column.color: 'red'}">{{ column.attrs.label }} </span>
</template>
<div v-if="column.attrs.columns && column.attrs.columns.length > 0">
<template v-for="(column1, index1) in column.attrs.columns">
<el-table-column
:key="index1"
align="center"
v-bind="column1.attrs || {}"
>
<template v-if="column1.header" slot="header">
<el-button v-if="column1.isClick" type="text" @click="column1.onClick">{{ column1.attrs.label }} </el-button>
<span v-else :style="{color: column1.color?column1.color: 'red'}">{{ column1.attrs.label }} </span>
</template>
</el-table-column>
</template>
</div>
</el-table-column>
<!-- 插槽显示 -->
<el-table-column
v-else
:key="index"
align="center"
v-bind="column.attrs || {}"
>
<template slot-scope="scope">
<slot :name="column.slot" :scope="scope" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'Table',
props: {
columns: {
type: Array,
default: null
},
data: {
type: Array,
default: null
}
},
data () {
return {
}
},
created () {
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
2、案例代码：
<template>
<d2-container>
<ipd-table
:columns="columns"
:data="data"
>
<template
slot="setupSlot"
slot-scope="{ scope }"
>
<el-button type="warn" @click="handleClick1(scope.row)"> {{ scope.row }} </el-button>
</template>
</ipd-table>
</d2-container>
</template>
<script>
import IpdTable from '@/components/ipd-table/table'
export default {
name: 'ProjectDeviationReport',
components: {
IpdTable
},
data () {
return {
value2: false,
columns: [
{
attrs: {
label: '发布人1',
prop: 'whoCreateName',
width: 120
},
header: true,
color: 'blue'
},
{
attrs: {
label: '文件名称',
prop: 'fileName',
width: 200,
columns: [
{
attrs: {
label: '文件名称',
prop: 'fileName',
width: 200
},
header: true,
isClick: true,
onClick: this.handleClick
},
{
attrs: {
label: '文件名称11111',
prop: 'fileName',
width: 200
}
}
]
},
header: true,
isClick: true,
onClick: this.handleClick
},
{
attrs: {
label: '发布人1',
prop: 'whoCreateName',
width: 120
}
},
{
attrs: {
label: '操作',
width: 120
},
slot: 'setupSlot'
}
],
data: [
{
fileName: '供应商黑名单申请单',
whoCreateName: '王亚浩'
}
]
}
},
mounted () {
},
methods: {
handleClick () {
alert(3333333)
},
handleClick1 (row) {
console.log('row', row)
}
}
}
</script>
<style lang="scss" scoped>
</style>
3、使用说明书代码
<template>
<d2-container>
<ipd-table
:columns="columns"
:data="data"
>
// 插槽 如果要修改显示的内容可通过插槽修改,并在 columns 中配置 slot: 'setupSlot' 属性值,如果不需要则无需配置 <template>
<template
slot="setupSlot"
slot-scope="{ scope }"
>
<el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</template>
</ipd-table>
</d2-container>
</template>
<script>
import IpdTable from '@/components/ipd-table/table'
export default {
name: 'ProjectDeviationReport',
components: {
IpdTable
},
data () {
return {
value2: false,
columns: [
{
attrs: {
label: '发布人1',
prop: 'whoCreateName',
width: 120
},
header: true,
color: 'blue' //修改自定义表头颜色，默认红色
},
{
attrs: {
label: '文件名称',
prop: 'fileName',
width: 200,
columns: [
{
attrs: {
label: '文件名称',
prop: 'fileName',
width: 200
},
header: true,
isClick: true,
onClick: this.handleClick
},
{
attrs: {
label: '文件名称11111',
prop: 'fileName',
width: 200
}
}
]
},
header: true, //是否自定义表头
isClick: true, //是否自定义表头 表头是否可点击
onClick: this.handleClick // 可点击事件绑定
},
{
attrs: {
label: '发布人1',
prop: 'whoCreateName',
width: 120
},
slot: 'setupSlot'
},
{
attrs: {
label: '发布人',
prop: 'whoCreateName',
width: 120
},
header: true,
color: 'blue'
}
// {
// attrs: {
// label: '操作',
// prop: 'setUp',
// width: 120
// },
// slot: 'setupSlot'
// }
],
data: [
{
fileName: '供应商黑名单申请单',
whoCreateName: '王亚浩'
}
]
}
},
mounted () {
},
methods: {
handleClick () {
alert(3333333)
}
}
}
</script>
<style lang="scss" scoped>
</style>
