elemment-ui实现表格render函数

最近做项目的时候，多个页面用到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();
    },
   


  },
};