vue element table 递归组件插槽

需求：

　　展示表格，多级动态表头 ，个别列有不同的显示或操作逻辑。

 

需求分析：

　　动态渲染表格，采用递归组件的方式将el-table-column 二次封装。

 

问题：递归组件如何实现插槽？

　　插槽中可能使用原本的el-table-column暴露的行、列数据，所以要通过递归将最底层的子节点行列数据暴露出来

写法如下：

<!--MTableColumn 递归组件-->
<template>
  <el-table-column
    v-if="columnProp.children && columnProp.children.length > 0 " 
    align="center"
    :label="columnProp.label"
  >
    <m-table-column v-for="(sHead, index) in columnProp.children" :columnProp="sHead" :key="index">
      <template slot-scope="scope">
        <!-- 递归插槽传递：此处获取的是组件内部传出的值，传递的是最下面一层的子节点的，而不是根节点 -->
        <slot v-bind="{row: scope.row, column: scope.column}"></slot>
      </template>
    </m-table-column>
  </el-table-column>
  <el-table-column
    v-else
    :label="columnProp.label"
    :min-width="columnProp.width"
    :prop="columnProp.prop"
    header-align="center"
    align="center"
    :fixed="columnProp.fixed"
  >
    <template slot-scope="scope">
      <slot v-bind="{row: scope.row, column: column}"></slot>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'MTableColumn',
  props: {
    columnProp: {
      type: Object,
      default: () => {}
    }
  }

}
</script>

　　

 

调用：

<template>
  <div>
    <el-table v-loading="loading" :data="tableList" class="picc-table picc-table-normal">
      <m-table-column v-for="(sHead,index) in LIST1.th_title" :columnProp="sHead" :key="index">
        <template slot-scope="{row, column}">
          <span v-if="column.property === 'do'">
            <el-button type="text" @click="openAdd(row)">编辑</el-button>
          </span>
          <span v-else-if="column.property === 'validstatus'">
            <span style="padding-left:10px;">{{row.validstatus | formatValidstatus | formatNull }}</span>
          </span>
          <el-tooltip v-else-if="column.property === 'remark' && row[column.property]" class="item" effect="dark" placement="bottom">
            <div slot="content">
              <span v-for="(item,index) in row['remarklist']" :key="index">{{item}}<br/></span>
            </div>
            <span>{{row['remarklist'][0]}}</span>
          </el-tooltip>
          <span v-else>{{ row[column.property] | formatNull }}</span>
        </template>
      </m-table-column>
    </el-table>
  </div>
</template>
<script>
import MTableColumn from '@/components/MTableColumn'

export default {
  components: {
    MTableColumn
  },
  data() {
    return {
      LIST1,
      tableList: [{
        userId: '15818588309',
        name: '111',
        aaa: '222',
        bbb: '333',
        vccc: '444222',
        bvew: '566',
      }]
    }
  },
  methods: {
    // 查询列表
    queryList() {
      this.loading = true
      // api
    }
  }
}
</script>