在这里推荐一个很好用的鼠标插件,简洁,代码量少,易用,经过自己改造,适用大部分业务场景
// 应用私有样式
@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