想不通这是什么问题？各位路过的大佬有空帮忙看看
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' }
]
}
]
