<template>
<div class="cus-table">
<Table
ref="tDom"
:border="border"
:stripe="stripe"
:size="size"
:loading="loading"
:columns="columns"
:data="data"
:width="width"
:height="tableHeight"
@on-row-click="onRowClick"
@on-select-all="onSelectAll"
@on-selection-change="onSelectionChange"
@on-select-cancel="onSelectCancel"
@on-select-all-cancel="onSelectAllCancel"
>
<template
v-for="column in columns"
slot-scope="{ row, index }"
:slot="column.slot"
>
<slot
:name="column.slot"
:row="row"
:index="index"
v-if="column.slot"
></slot>
</template>
</Table>
</div>
</template>
<script>
/**
* @columns Table表头
* @data Table表格数据
* @loading 表格懒加载
* @width 表格宽度,单位 px
* @height 表格高度
* @border 是否显示纵向边框
* @stripe 是否显示间隔斑马纹
* @size 表格尺寸,可选值为 large、small、default 或者不填
*/
export default {
name: "cus-table",
data() {
return {
tableHeight: 0,
};
},
props: {
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
width: {
type: [String, Number],
default: 0
},
height: {
type: [String, Number],
default: 324,
},
size: {
type: [String, Number],
default: "default",
},
border: {
type: Boolean,
default: false,
},
stripe: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
},
mounted() {
this.tableHeightChange();
window.addEventListener("resize", this.tableHeightChange, true);
},
methods: {
// 单击某一行时触发
onRowClick(e) {
this.$emit('on-row-click', e)
},
// 在多选模式下有效,只要选中项发生变化时就会触发
onSelectionChange(e) {
this.$emit('on-selection-change', e)
},
// 在多选模式下有效,点击全选时触发
onSelectAll(e) {
this.$emit('on-select-all', e)
},
// 在多选模式下有效,取消选中某一项时触发
onSelectCancel(e) {
this.$emit('on-select-cancel', e)
},
// 在多选模式下有效,点击取消全选时触发
onSelectAllCancel(e) {
this.$emit('on-select-all-cancel', e)
},
// 操作dom
tableDom() {
this.$refs.tDom.selectAll(true);
},
// 设置Table表头高度自适应
tableHeightChange() {
this.tableHeight = window.innerHeight - this.height; // 表格自适应高度
},
},
destroyed() {
window.removeEventListener("resize", this.resizeHandle, true);
},
};
</script>
<style lang="less">
</style>
iview table动态改变表格高度二次封装
于 2022-06-18 15:48:11 首次发布