vue+element-table 动态渲染表格及 拓展表格

Question

想不通这是什么问题？各位路过的大佬有空帮忙看看
extendTable.vue

<script>
  import columnTemplate from '../columns/columns'
  import {checkRule} from '../../global/js/table/table'
  import table from '../../global/js/mixin/table'

  export default {
    name: 'extendTable',
    mixins: [table],
    render(createElement) {
      let that = this
      let columns = []
      for (let v of that.columns) {
        let option = {}
        if (v.type === 'extend' || v.type === 'action' || v.type === 'headerBtn') {
          option = {
            props: {
              prop_column: v,
              extendlist: that.extendlist,
              saving: that.saving
            }
          }
        } else {
          option = {
            props: {
              prop_column: v
            }
          }
        }
        if (['text', 'action', 'tags', 'tag', 'status', 'headerBtn', 'img', 'json', 'icon', 'extend'].includes(v.type)) {
          option = Object.assign(option, {
            on: {
              actions: that.actions
            }
          })
        }
        if (!v.hasOwnProperty('rules')) {
          columns.push(createElement(columnTemplate[v.type], option))
        }
        else if (checkRule(v.rules)) columns.push(createElement(columnTemplate[v.type], option))
      }
      return createElement('el-table', {
        style: {
          width: '100%',
          marginBottom: '0.8vh'
        },
        attrs: {
          'element-loading-text': that.$t('loading.loading')
        },
        on: {
          'sort-change': function (column) { // 表格排序条件改变时
            that.actions('sort', column)
          },
          'row-dblclick': function (row, column, event) { // 某一行被双击时会触发该事件
            that.actions('row-dblclick', row)
          },
          'row-click': function (row, column, event) { // 某一行被单击时会触发该事件
            that.actions('row-click', row)
          },
          'expand-change': function (row, column, event) { // 某一行被单击时会触发该事件
            that.actions('expand-click', row)
          }
        },
        props: {
          data: that.list,
          size: that.globalSize,
          height: that.listHeight,
          highlightCurrentRow: that.highlight,
          border: that.border,
          stripe: that.stripe,
          'show-header': that.header,
          'row-class-name': function ({row}) { // 设置表格每行数据的样式
            return that.setRowClassName(row)
          },
          'show-summary': that.show_summary, // 是否在表尾显示合计行
          'summary-method': function ({columns, data}) { // 表尾合计行统计
            return that.getSummaries(columns, data)
          }
        },
        directives: [
          {
            name: 'loading',
            value: that.table
          }
        ],
        ref: 'extendTable'
      }, columns)
    }
  }
</script>

extendColumn.vue (normalTable.vue和extendTable一致，除了绑定事件不同)

<template>
  <el-table-column
      :align="column.align"
      :fixed="column.fixed"
      :label="transform(column.name)"
      :width="column.width"
      show-overflow-tooltip
      type="expand"
  >
<!--    <template slot-scope="{ row }">-->
    <template>
      <div>
        {{column.extendColumn}}
        <br>
<!--        {{row[column.prop]}}<br>-->
    <normal-table ref="extendTable" :columns="column.extendColumn" :list="list" :table="requesting" :pagination-size="8" />
      </div>
    </template>
  </el-table-column>
</template>
<script>
import normalTable from "../table/normalTable"
import requesting from "../../global/js/mixin/requesting"

export default {
  name: 'extendColumn',
  mixins: [requesting],
  components: {normalTable},
  computed: {
    column() {
      let a = this.deepCopy(this.default_column)
      let b = this.deepCopy(this.prop_column)
      return this.extend(a, b)
    }
  },
  props: {
    prop_column: { required: true, type: Object },
    extendlist: { type: Array, default() { return [] } }
  },
  data() {
    return {
      default_column: {
        align: 'center',
        head_align: 'center',
        type: 'text',
        language: '',
        fixed: false,
        width: '60',
        prop: '',
        post: false,
        columns: []
      },
      list: [
        {
          visit_times: 11,
          mobile: "15359310689",
          name: "su",
          cost_money: "16084.00",
          created_at: "2020-03-20 11:11:13"
        }
      ]
    }
  },
  mounted() {
  }
}
</script>

index.vue

    columns: [
          { type: 'index' },
          {
            name: '', prop: 'member', width: '60', type: 'extend',
            extendColumn: [
              { type: 'index' },
              { name: 'member.name', prop: 'name', width: '120', type: 'text' },
              { name: 'member.mobile', prop: 'mobile', width: '120', type: 'text' },
              { name: 'member.enter_times', prop: 'member.enter_times', width: '120', type: 'text' },
              { name: 'member.cost', prop: 'member.cost', width: '120', type: 'text' },
              { name: 'member.status', prop: 'member.status', width: '120', type: 'text' },
              {
                type: 'action', align: 'center', width: '70', buttons: [
                  { name: 'bonus.top_up', type: 'danger', event: 'giftBag' }
                ]
              }
            ]
          },
          { name: 'marketing.name', prop: 'member.name', width: '120', type: 'text' },
          { name: 'bonus.shareholder.down_line', prop: 'down_line', width: '80', type: 'text' },
          { name: 'bonus.withdrawableShareCapital', prop: 'invest_cash', width: '100', type: 'text' },
          { name: 'bonus.shareholder.min_money', prop: 'bonus_type.min_money', width: '100', type: 'text', rules: this.type === 3 ? [] : [''] },
          { name: 'bonus.equityMoney', prop: 'invest', type: 'text', rules: this.type === 3 ? [] : [''] },
          { name: 'bonus.shareholder.config', prop: 'money_return', width: '100', type: 'text', rules: this.type === 3 ? [] : [''] },
          { name: 'bonus.scheme_details', type: 'action', fixed: false, align: 'center', width: '70', buttons: [
              { name: 'button.look', type: 'primary', event: 'look' }
            ]
          },
          { name: 'bonus.create_time', prop: 'created_at', width: '200', type: 'text' },
          { name: 'bonus.shareholder.total_divice', prop: 'total_bonus', width: '200', type: 'text' },
          { name: 'bonus.can_cash', prop: 'bonus_cash', width: '100', type: 'text' },
          { name: 'bonus.can_not_cash', prop: 'can_not_cash', width: '100', type: 'text' },
          { name: 'bonus.withdrawals', prop: 'withdrawals', width: '100', type: 'text' },
          { name: 'bonus.shareholder.status', prop: 'status', width: '100', type: 'status', language: 'item.tag_status' },
          {
            type: 'action', align: 'center', width: '70', rules: this.type === 3 ? [] : [''], buttons: [
              { name: 'bonus.top_up', type: 'danger', event: 'giftBag' }
            ]
          }
        ]

Answer 1

是渲染的时候组件名称重复的问题，解决方法是更换组件名称

Answer 2

看错误提示，是你的normal-table没有被正确注册，所以识别不了normal-table

Answer 3

normal-table没有注册

components: {normalTable},