1.封装通用组件
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
<el-table-column
v-for="item in tableLabel"
:key="item.prop"
:prop="item.prop"
:label="item.label"
align="center"
show-overflow-tooltip>
</el-table-column>
<template slot-scope="scope">
// 根据需要封装更多
<div v-if="item.type === 0">
{{scope.row[item.prop]}}
</div>
<div v-if="item.type === 1">
<span v-if="scope.row.sex === 0">女</span>
<span v-if="scope.row.sex === 1">男</span>
</div>
</template>
<slot class="btn"></slot>
</el-table>
</template>
<script>
export default {
name: 'tableCommon',
props: {
tableData: {
type: Array
},
tableLabel: {
type: Array
}
}
}
</script>
<style scoped>
</style>
2.挂载到全局
在main.js中
import tableCommon from '@/api/components/tableCommon'
Vue.component('tableCommon', tableCommon)
3.在组件中使用
<tableCommon :tableData="tableData" :tableLabel="tableLabel" :handleSelectionChange="handleSelectionChange">
<el-table-column
label="操作"
align="center"
show-overflow-tooltip
slot="btn"
>
<el-button></el-button>
</el-table-column>
</tableCommon>
data() {
return{
tableData: [],
tableLabel: [
{type: 0, prop: 'name', label: '姓名'},
{type: 0, prop: 'a', label: 'a'},
{type: 0, prop: 'b', label: 'b'},
{type: 0, prop: 'c', label: 'c'},
{type: 1, prop: 'sex', label: '性别'},
]
}
},
methods: {
handleSelectionChange() {}
}