注意:
vue3和vue2可能这里不一样:<template #default="scope">
子组件
<template>
<el-table-column
:type="col.type || null"
:prop="col.prop"
:label="col.label"
:header-align="headAlign"
:width="col.width || null">
<template #default="scope">
<template v-if="col.children && col.children.length!==0">
<childTable v-for="(item, i) in col.children"
:key=" item.prop + i"
:headAlign="headAlign || subHeadAlign"
:col="item"></childTable>
</template>
<template v-else-if="col.slot">
<template v-if="col.slotName">
<slot :data="scope.row" :name="col.slotName"></slot>
</template>
</template>
<template v-else>{{scope.row[col.prop]}}</template>
</template>
</el-table-column>
</template>
<script>
export default {
name: "childTable",
props: {
col:{
type:[Object],
default:()=>{
return {}
}
},
headAlign:{
type:[String],
default:"left"
},
subHeadAlign:{
type:[String],
default:"left"
}
},
data() {
return {};
},
components: {},
mounted() {
},
methods: {},
}
</script>
<style scoped lang="scss">
</style>
父组件
<template>
<el-table
:data="tableData"
:border="border"
:stripe="stripe"
height="100%"
style="width: 100%">
<child :headAlign="headAlign" :subHeadAlign="subHeadAlign" v-for="(item,index) in columns" :key="index" :col="item">
<template v-slot:[item.slotName]="row">
<slot :data="row.data" :name="item.slotName"></slot>
</template>
</child>
</el-table>
</template>
<script>
import child from "@/component/elTableCom/childTable.vue"
export default {
name: "elTableCom",
props: {
tableData:{
type:[Array],
default:()=>{
return []
}
},
columns:{
type:[Array],
default:()=>{
return []
}
},
border:{
type:[String,Boolean],
default:false
},
stripe:{
type:[String,Boolean],
default:false
},
headAlign:{
type:[String],
default:"left"
},
subHeadAlign:{
type:[String],
default:"left"
}
},
data() {
return {
};
},
components: {child},
mounted() {
},
methods: {
},
}
</script>
<style scoped lang="scss">
</style>
组件使用传参格式
{
"success": true,
"msg": "",
"data": {
"columns": [
{
"prop": "prop1",
"label": "label1"
},
{
"label": "label2",
"prop": "prop2"
},
{
"label": "label3",
"prop": "prop3"
},
{
"label": "详情",
"slot": true,
"slotName":"isImg"
}
],
"tableData": [
{
"prop1": "某某某1",
"prop2": 8834,
"prop3": 223,
"url": "https://xxx"
}
]
}
}
使用
<tableCom :columns="columns" :tableData="tableData">
<template v-slot:isImg="row">
<div style="text-align: center;cursor: pointer" @click="handleClick(row.data)">
<img width="14" src="xxx.png" alt="">
</div>
</template>
</tableCom>