怎么实现element ui中el-table的复用
参考资料:https://segmentfault.com/a/1190000012054846
思路分析利用v-for来循环渲染加载el-table-column
需要具备的知识点:(1)v-for循环
(2) 父传子数据
步骤一:
先封装一个table可以引入到其他父组件中
<!--table子组件封装-->
<template>
<el-table :data="value.tableData" border>
<el-table-column v-for="(item,key) in value.tableKey"
:key="key"
:prop="item.value"
:label="item.name"></el-table-column>
</el-table>
</template>
<script>
export default{
name: 'table',
props:{
value: {
type: Object,
default: true
}
},//子传父
data(){
return{
}
},
}
</script>
<style>
</style>
步驟二:父组件构建
<template>
<div>
<!--绑定数据传值给子组件-->
<tableC :value="value"></tableC>
</div>
</template>
<script>
import TableComponents from "@/components/table";//引入table子组件
export default {
data() {
return {
//value需要传递数据
value:{
tableData:[],
tableKey:[
{
name:'频道名称',
value:'cate_name'
},
{
name:'频道类型',
value:'cate_sname'
}
]
}
};
},
//注册子组件table
components: {
tableC: TableComponents
},
methods: {
//利用getFormData函数方法
getFormData() {
this.$axios
.post("https://api.apiopen.top/musicBroadcasting")
.then(res => {
console.log(res);
if (res.data.code == 200) {
//成功操作
console.log(res.data.result[0].channellist);
this.value.tableData = res.data.result[0].channellist;
console.log(this.value.tableData);
}
})
.catch(err => {
// 失败操作
this.$message({
type: "error",
message: "添加数据失败!"
});
});
}
},
mounted() {
// 调用getFormData函数方法
this.getFormData();
}
};
</script>
<style>
</style>