背景
我们平常工作中需要用表格的形式来展示多行数据
需求
需求1:通过配置文件的形式来设置表格的列
需求2:可以合并表头
代码
MyTable.vue
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
stripe
:height="height"
border
>
<el-table-column
v-for="(column, index) in columns"
:key="index"
:prop="column.prop"
:label="column.label"
:width="column.width"
:fixed="column.fixed"
:sortable="column.sortable"
:show-overflow-tooltip="true"
align="center"
>
<!-- // 下面不可行
<template slot-scope="scope" v-if="column.children">
<slot :name="column.slotName" :row="scope.row">
{{ scope.row[column.prop] }}
</slot>
</template>
<template v-else>
<el-table-column
v-for="(column2, index2) in column.children"
:key="column2 + ' ' + index2"
:prop="column2.prop"
:label="column2.label"
></el-table-column>
</template>
-->
<!--
如果没有表头合并的话,下面的el-table-column是不会遍历的;下面的插槽则会采用默认的内容,或者由外面自定义;
如果有表头合并的话,则会执行下面的el-table-column;
-->
<template slot-scope="scope">
<slot :name="column.slotName" :row="scope.row">
{{ scope.row[column.prop] }}
</slot>
</template>
<el-table-column
v-for="(column2, index2) in column.children"
:key="column2 + ' ' + index2"
:prop="column2.prop"
:label="column2.label"
:width="column.width"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'MyTable',
props: {
tableData: {
type: Array,
default() {
return []
},
},
// 存在的列
columns: {
type: Array,
required: true,
},
height: {
type: String,
},
showIndexColumn: {
type: Boolean,
default: false,
},
},
}
</script>
<style scoped></style>
table.config.js
const tableConfig = {
// 设置列
columns: [
{
prop: 'date',
label: '日期',
width: '280',
// 设置固定列
fixed: true,
// 设置排序
sortable: true,
},
{
prop: '',
label: '配送信息',
children: [
{
prop: 'name',
label: '姓名',
width: '180',
},
{
prop: 'province',
label: '省份',
width: '180',
},
{
prop: 'city',
label: '市区',
width: '200',
},
{
prop: 'address',
label: '地址',
width: '200',
},
{
prop: 'zip',
label: '邮编',
},
],
},
{
prop: '',
label: '操作',
// 作用域插槽
slotName: 'operator',
},
],
// 设置固定表头
height: '250',
}
export default tableConfig
Test.vue
<template>
<div>
<my-table v-bind="tableConfig" :tableData="tableData">
<template #operator="scope">
<el-button
type="primary"
size="mini"
icon="el-icon-edit"
circle
@click="handleEditClick(scope.row)"
></el-button>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
circle
@click="handleDelClick(scope.row)"
></el-button>
</template>
</my-table>
</div>
</template>
<script>
import MyTable from '@/components/table'
import tableConfig from './table.config'
export default {
data() {
return {
tableConfig,
tableData: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
],
}
},
components: {
MyTable,
},
methods: {
handleEditClick(data) {
console.log('edit', data)
},
handleDelClick(data) {
console.log('del', data)
},
},
}
</script>
<style scoped></style>