封装代码
<template>
<div class="perfectTable">
<el-table :data="tableData" v-bind="tableAttributes">
<el-table-column
v-for="({prop, align, ...res}) in columns"
:align="align || 'center'"
v-bind="res"
:key="prop">
<template slot-scope="scope">
<slot :name="prop" :scope="scope">{{scope.row[prop]}}</slot>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'PerfectTable',
props: {
tableData: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => []
}
},
computed: {
tableAttributes () {
const { tableData, columns, ...res } = this.$attrs
return res
}
}
}
</script>
<style>
</style>
使用
<template>
<div class="home">
<PerfectTable :tableData="tableData" :columns="columns" :border="true">
<template v-slot:sex="ctx">
<el-tag >{{ctx.scope.row.sex + '--------'}}</el-tag>
</template>
</PerfectTable>
</div>
</template>
<script>
import PerfectTable from '@/components/common/PerfectTable/index'
export default {
components: { PerfectTable},
name: 'HomeView',
data () {
return {
tableData: [
{
id: 1,
name: '张三',
age: 18,
sex: '男'
},
{
id: 2,
name: '张三1',
age: 19,
sex: '女'
},
{
id: 3,
name: '张三1',
age: 19,
sex: '女'
},
{
id: 4,
name: '张三1',
age: 19,
sex: '女'
}
],
columns: [
{
prop: 'id',
label: 'ID',
'min-width': '55px',
align: 'left'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'age',
label: '年龄'
},
{
prop: 'sex',
label: '性别'
}
]
}
}
}
</script>
