最近做项目的时候,多个页面用到element-ui表格相同的功能,所以就封装一下,考虑不周的地方,忘指出!!!
//子组件
<template>
<el-table :data="tableList">
<template v-for="item in propList">
//1、这个是匿名插槽就是 父组件下面有内容的时候,不渲染<slot>不渲染内容</slot>
//比如<child><div>3333</div></child>
//要是父组件比如<child></child>里面没有内容的时候,就会渲染
//<slot></slot>里面的内容
<slot :content="item">
<el-table-column
:key="item.id"
:prop="item.prop"
:label="item.label"
></el-table-column>
</slot>
</template>
</el-table>
</template>
<script>
export default {
props: {
propList: {
type: Array,
default: () => [],
},
tableList: {
type: Array,
default: () => [],
},
},
};
</script>
父组件里面
<base-render-table :propList="propList" :tableList="tableList">
<!-- 这里的判断逻辑 是如果有render函数,就直接渲染这个模板 没有就渲染子组件中的匿名插槽 -->
<template slot-scope="{ content }" v-if="content.render">
<el-table-column :label="content.label">
<template slot-scope="{ $index, row }">
<ex-slot
:render="content.render"
:row="row"
:index="$index"
/>
</template>
</el-table-column>
</template>
</base-render-table>
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null,
},
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index,
};
console.log("data", params);
return data.props.render(h, params);
},
};
//exSlot执行顺序,先执行组件内render生命周期在执行父组件的render函数
export default {
components: {
exSlot,
},
data() {
return {
propList: [
{ label: "姓名", prop: "name", id: 1 },
{
label: "图片",
prop: "pic",
id: 2,
render:(h, params) =>{
let array=[1,2]
let result = []
array.forEach(v=>{
result.push(
h("img",{
style: {
marginRight: '5px',
width:"30px",
},
attrs:{
src:params.row.pic
}
})
)
})
return h("div",{
},
result
)
}
//return `<img style="width:30px;height:30px" onClick='${deletes}' src='${pic}' />`
},
{
label: "操作",
prop: "operate",
id: 3,
render: (h, params) => {
return h("div", [
h("el-button", {
on: {
click: () => {
this.filterData();
},
},
},"修改"),
h("el-button", {
on: {
click: () => {
this.filterData();
},
},
},"删除"),
]);
},
},
],
tableList: [
{
name: "章三",
pic:
"https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png",
text: "新增",
},
{
name: "里斯",
pic:
"https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png",
text: "删除",
},
{
name: "网舞",
pic:
"https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png",
text: "跳转",
},
],
},
mounted() {
},
methods: {
filterData() {
this.pagination.pageNum = 1;
this.getProductList();
},
},
};
elemment-ui实现表格render函数
最新推荐文章于 2024-06-21 11:54:06 发布