基于vue 和 ivew ui 复杂业务需求的带复杂表头树表结构

在这里推荐一个很好用的鼠标插件，简洁，代码量少，易用，经过自己改造，适用大部分业务场景

// 应用私有样式
@import ‘./TreeGrid.less’;


@import ‘./TreeGrid1.less’; // 应用公共样式

                <th v-for="(column,index) in columnChild" :colspan="column.cols" :rowspan="column.rows" v-if='column.cols != 0 && column.rows != 0'>
                    <label v-if="column.type === 'selection'">
                        <input type="checkbox" v-model="checks" @click="handleCheckAll">
                    </label>
                    <label v-else>
                        {{ renderHeader(column, index) }}
                        <span class="ivu-table-sort" v-if="column.sortable">
                            <Icon type="arrow-up-b" :class="{on: column._sortType === 'asc'}" @click.native="handleSort(index, 'asc')" />
                            <Icon type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" />
                        </span>
                    </label>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in initItems" :key="item.id" v-show="show(item)" :class="{'child-tr':item.parent}">
                <td v-for="(column,snum) in columns[columns.length-1]" :key="column.key" :style=tdStyle(column)>
                    <label v-if="column.type === 'selection'">
                        <input type="checkbox" :value="item.id" v-model="checkGroup" @click="handleCheckClick(item,$event,index)">
                    </label>
                    <div v-if="column.type === 'action'">
                        <i-button :type="action.type" size="small" @click="RowClick(item,$event,index,action.text)" v-for='action in (column.actions)' :key="action.text">{{action.text}}</i-button>
                    </div>
                    <label @click="toggle(index,item)" v-if="!column.type" style="display:inline-block;">
                        <span v-if='snum==iconRow()'>
                            <i v-html='item.spaceHtml'></i>
                            <i v-if="item.children&&item.children.length>0" class="ivu-icon" :class="{'ivu-icon-arrow-right-b':!item.expanded,'ivu-icon-arrow-down-b':item.expanded }"></i>
                            <i v-else id="ms-tree-space"></i>
                        </span> {{renderBody(item,column) }}
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

export default { name: 'treeGrid', props: { columns: Array, items: { type: Array, default: function() { return []; } } }, data() { return { initItems: [], //处理后数据数组 cloneColumns: [], //处理后的表头数据 checkGroup: [], //复选框数组 checks: false, //全选 screenWidth: document.body.clientWidth, //自适应宽 tdsWidth: 0, //td总宽 timer: false, //控制监听时长 dataLength: 0, //树形数据长度 } }, computed: { tableWidth() { return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ? this.screenWidth + 'px' : '100%' } }, watch: { screenWidth(val) { if (!this.timer) { this.screenWidth = val this.timer = true setTimeout(() => { this.timer = false }, 400) } }, items() { if (this.items) { this.dataLength = this.Length(this.items) this.initData(this.deepCopy(this.items), 1, null); this.checkGroup = this.renderCheck(this.items) if (this.checkGroup.length == this.dataLength) { this.checks = true } else { this.checks = false } } }, columns: { handler() { this.cloneColumns = this.makeColumns(); }, deep: true }, checkGroup(data) { this.checkAllGroupChange(data) }, }, mounted() { if (this.items) { this.dataLength = this.Length(this.items) this.initData(this.deepCopy(this.items), 1, null); this.cloneColumns = this.makeColumns(); this.checkGroup = this.renderCheck(this.items) if (this.checkGroup.length == this.dataLength) { this.checks = true } else { this.checks = false } } // 绑定onresize事件 监听屏幕变化设置宽 this.$nextTick(() => { this.screenWidth = document.body.clientWidth }) window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth this.screenWidth = window.screenWidth })() } }, methods: { // 有无多选框折叠位置优化 iconRow() { for (var i = 0, len = this.columns.length; i