vue怎么实现table-plus组件

今天小编给大家分享一下Vue怎么实现table-plus组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

目的

• 配置型表格多级表头/自定义表头、形数据与懒加载用法等支持el-table大部分属性和用法

• 内置loading加载

• 内置合并单元格

• 默认跨页选择

• 自定义列模板

• 划重点：后面tableSmart的基础组件

源码

• 包裹层TableWrap.vue

 <template>  <div :class="s.tableWrap">    <slot></slot>    <div :class="s.noData" v-if="!loading && list.length === 0">      <div>        <d-icon :class="s.icon" type="no-data"></d-icon>        <div :class="s.text">{{ text }}</div>      </div>    </div>  </div></template><script>export default {    props: {        list: {            type: Array,            default: [],        },        text: {            type: String,            default: '搜索不到您想要的数据~换个条件试一下',        },        loading: {            type: Boolean,            default: false,        },    },    data() {        return {};    },};</script><style lang="sCSS" module="s">.tableWrap {  position: relative;}.noData {  position: absolute;  top: 50%;  left: 50%;  transfORM:  translate(-50%,-50%);  > div {    display: flex;    align-items: center;    flex-direction: column;    justify-content: center;  }  .icon {    font-size: 60px;    color: $color-primary;  }  .text {    color: #80848f;    font-size: 14px;    margin: 8px 0 16px;  }}</style>

• 核心拓展

<script>import VTableWrap from './TableWrap.vue';export default {    components: {        VTableWrap,    },    props: {        spanConfig: {            type: Object,            default: () => ({                propList: [],                children: 'children',                key: '',            }),        },    },    data() {        return {            domTable: '',            loading: {},        };    },    computed: {        list() {            if (this.spanConfig.key) {                const arr = [];                this.$attrs.data.forEach((item) => {                    if (item[this.spanConfig.children] && item[this.spanConfig.children].length) {                        item[this.spanConfig.children].forEach((child) => {                            arr.push({                                ...item,                                ...child,                            });                        });                    } else {                        arr.push({                            ...item,                        });                    }                });                return arr;            }            return this.$attrs.data;        },        // 合并多少个计算        spanArr() {            let contactDot = 0;            const spanArr = [];            this.list.forEach((item, index) => {                if (index === 0) {                    spanArr.push(1);                } else {                    if (item[this.spanConfig.key] === this.list[index - 1][this.spanConfig.key]) {                        spanArr[contactDot] += 1;                        spanArr.push(0);                    } else {                        spanArr.push(1);                        contactDot = index;                    }                }            });            return spanArr;        },        // 取要合并的index        spanIndex() {            const propList = this.$attrs.columns.map((item) => item.prop || item.property);            return this.spanConfig.propList.map((prop) => (                propList.findIndex((key) => key === prop)            ));        },    },    mounted() {        this.$nextTick(() => {            // 此处勿使用document 会区找寻windows 作用域下生成的所有dom元素            this.domTable = this.$refs.table.$el.querySelector('.el-table__body');            if (this.domTable) {                this.loading = this.$loading({                    lock: true,                    customClass: this.s.customLoding,                    text: '',                    spinner: 'el-icon-loading',                    target: this.$refs.table.$el.querySelector('.el-table__body'),                });                // 加载因为 render函数渲染执行 顺序 此处需关闭                if (this.$attrs.loading === undefined) {                    this.loading.close();                } else {                    this.loading.visible = this.$attrs.loading;                }            }        });    },    render(createElement) {        const { columns = [] } = this.$attrs;        // 加载        this.$nextTick(() => {            this.$refs.table.doLayout();            if (this.domTable) {                if (this.$attrs.loading === undefined) {                    this.loading.close();                } else {                    this.loading.visible = this.$attrs.loading;                }            }        });        // 加上递归        const tableColumn = (item, index) => createElement(            'el-table-column',            {                props: {                    ...item,                },                key: `${item.label}-${index}`,                scopedSlots: {                    default: this.$scopedSlots[item.slotName] || '',                    header: this.$scopedSlots[item.slotHeaderName] || '',                },            },            [                item.children            && item.children.length            && item.children.map((list, index) => tableColumn(list, index)),            ],        );        const table = createElement(            'el-table',            {                ref: 'table',                props: {                    headerRowClassName: 'custom-table-header',                    'span-method': this.objectSpanMethod,                    ...this.$attrs,                    data: this.list,                },                on: {                    ...this.$listeners,                },                scopedSlots: {                    append: this.$scopedSlots.append,                },            },            [...columns.map((item, index) => tableColumn(item, index))],        );        return createElement('VTableWrap', {            props: {                text: this.$attrs.emptyText,                loading: this.$attrs.loading,                list: this.$attrs.data,            },        }, [table]);    },    methods: {        objectSpanMethod({            rowIndex,            columnIndex,        }) {            if (this.spanIndex.includes(columnIndex)) {                const _row = this.spanArr[rowIndex];                const _col = _row > 0 ? 1 : 0;                return {                    rowspan: _row,                    colspan: _col,                };            }        },        clearSelection() {            this.$refs.table.clearSelection();        },        toggleRowSelection(row, selected) {            this.$refs.table.toggleRowSelection(row, selected);        },        toggleAllSelection() {            this.$refs.table.toggleRowSelection();        },        toggleRowExpansion(row, expanded) {            this.$refs.table.toggleRowExpansion(row, expanded);        },        setCurrentRow(row) {            this.$refs.table.setCurrentRow(row);        },        clearSort() {            this.$refs.table.clearSort();        },        clearFilter(columnKey) {            this.$refs.table.clearFilter(columnKey);        },        doLayout() {            this.$refs.table.doLayout();        },        sort(prop, order) {            this.$refs.table.sort(prop, order);        },    },};</script><style lang="scss" module="s">.customLoding {  right: 1px;  bottom: 1px;  height: 100%;  :global(.el-icon-loading){     display: none;  }}</style>

文档

TablePlus Attributes

TablePlus Events

TablePlus Methods

TablePlus column

TablePlus spanConfig

基本用法

自定义列的显示内容，可组合其他组件使用。

:::demo 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

<div>  <d-table-plus :columns="columns" :data="tableData">    <template #date="{row}">      <i class="el-icon-time"></i>      <span >{{ row.date }}</span>    </template>    <template #handler="{ row }">      <el-button type="text" size="small" @click="handlerAdd(row)"        >新增</el-button      >      <el-button type="text" size="small">编辑</el-button>    </template>  </d-table-plus></div><script>  export default {    data() {      return {        columns: [          {            label: '日期',            prop: 'date',            align: 'center',            slotName: 'date',          },          {            label: '姓名',            width: '100px',            prop: 'name',            required: true,            align: 'center',            formatter: (row) => `${row.name}1111`,          },          {            label: '省份',            prop: 'province',          },          {            label: '市区',            prop: 'city',          },          {            label: '地址',            prop: 'address',            showOverflowTooltip: true,          },          {            label: '操作',            type: 'handler',            width: '150px',            fixed: 'right',            slotName: 'handler',          },        ],        tableData: [          {            date: '2016-05-02',            name: '王小虎',            province: '上海',            city: '普陀区',            address: '上海市普陀区金沙江路 1518 弄',            zip: 200333,          },          {            date: '2016-05-04',            name: '王小虎',            province: '上海',            city: '普陀区',            address: '上海市普陀区金沙江路 1517 弄',            zip: 200333,          },          {            date: '2016-05-01',            name: '王小虎',            province: '上海',            city: '普陀区',            address: '上海市普陀区金沙江路 1519 弄',            zip: 200333,          },          {            date: '2016-05-03',            name: '王小虎',            province: '上海',            city: '普陀区',            address: '上海市普陀区金沙江路 1516 弄',            zip: 200333,          },        ],      };    },  };</script>

以上就是“vue怎么实现table-plus组件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。