最近写业务发现每个页面都会用到table组件，每次都要写一大堆代码很不方便，现在就简单封装一个基础功能，后面陆续完善。
components， 新建table.vue组件，代码如下：
<!--
* @Description: 公共表格组件
* @Author: yanghui
* @Date: 2021-06-21 16:42:58
* @LastEditTime: 2021-06-22 10:36:55
* @LastEditors: yanghui
-->
<template>
<div>
<el-table :data="tableData" stripe border>
<el-table-column
label="序号"
type="index"
width="50px"
align="center"
/>
<template
v-for="(item,index) in tableHeader"
>
<el-table-column
:key="index"
:width="item.width?item.width:'auto'"
:min-width="item.minWidth"
:prop="item.prop"
:align="item.align?item.align:'center'"
:label="item.label"
>
<template slot-scope="scope">
<slot v-if="item.scopeStatus" :name="item.prop" :row="scope.row" />
<template v-else>
{{ scope.row[item.prop] }}
</template>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'TableList',
props: {
tableData: {
type: Array,
default: function() {
return []
}
},
tableHeader: {
type: Array,
default: function() {
return []
}
},
tableLoading: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
父组件引用：
<TableList :table-data="tableData" :table-header="tableHeader">
<!-- 操作项 -->
<template #operation>
<el-button type="primary" size="mini" plain>编辑</el-button>
<el-button type="danger" size="mini" plain>删除</el-button>
</template>
</TableList>
// 引入
import TableList from '@/components/Table'
components: {
TableList
},
// data
// 表格数据
tableData: [
{
name: '张三',
sex: '男'
},
{
name: '李四',
sex: '男'
}
],
// 表头数据
tableHeader: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
},
{
label: '操作',
prop: 'operation',
scopeStatus: true
}
]
实现效果图：
简单实现一个table组件的封装，后续还需增加其他功能，持续更新中。。。
