elementui 表格 slot 插槽使用 如果把elementui表格中的操作分离出来.

目前有这样的需求:

1. 表格 使用element-ui
2. 有10个页面都需要用到 这个表格
3. 表格有10个字段展示.
4. 其中这10个字段 有5个字段在各个页面来回切换使用.
5. 并且操作按钮的功能不一样(有1. 查看 2. 修改 3. 删除 4. 审核 5. 其他)

我的解决方案为以下步骤:

1. 把表格封装成组件, 名称为:common_table.vue
2. 传入子组件的数据有 tableData(表格数据) showColumn(隐藏显示列)
3. 使用了slot(插槽) 在父组件使用 控制各个按钮的操作.
4. 剩下的点击方法同学们自由发挥吧.

先看看效果图:
parent页面:

child的页面:

这边我讲的是vue2.0的
先简单的封装一下 公共表格(common_table.vue) 直接上代码了:

<template><div class="table"><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="province"label="省份"></el-table-column><el-table-columnprop="city"label="市区"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="zip"label="邮编"></el-table-column><el-table-columnprop="phone"label="电话" v-if="showColumn.phone"></el-table-column><el-table-columnprop="school"label="学校" v-if="showColumn.school"></el-table-column><slot></slot><!-- <el-table-columnlabel="操作"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column> --></el-table></div>
</template><script>
export default {name: 'table',props: {showColumn:{type:Object,default:()=>{return {}}}},data(){return{tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,phone:'15632548568',school:'学校1',}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333,phone:'15632548568',school:'学校1',}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333,phone:'15632548568',school:'学校1',}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333,phone:'15632548568',school:'学校1',}]}}
}
</script><style scoped>
</style>

parent组件为:

<template><div class="parent"><CommonTable :showColumn="showColumn"><template>  <!--这里的template 必须加 等同于 子组件中的slot(vue2.0版本) 但是注意注意注意vue3.0+ 不用加 --><el-table-columnlabel="操作"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></template></CommonTable></div>
</template><script>
import CommonTable from '@/components/common_table.vue'export default {name: 'parent',components: {CommonTable},data(){return{showColumn:{phone:true,}}}
}
</script>

child组件:

<template><div class="about"><CommonTable :showColumn="showColumn"><template>  <!--这里的template 必须加 等同于 子组件中的slot(vue2.0版本) 但是注意注意注意vue3.0+ 不用加 --><el-table-columnlabel="操作"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button></template></el-table-column></template></CommonTable></div>
</template><script>
import CommonTable from '@/components/common_table.vue'export default {name: 'about',components: {CommonTable},data(){return{showColumn:{school:true,}}}
}
</script>

如果能帮助到你的, 麻烦点个赞 . 谢谢!

学到的就要教人，赚到的就要给人。