基于el-table二次封装的通用表格组件

最新推荐文章于 2024-08-12 16:12:07 发布
最新推荐文章于 2024-08-12 16:12:07 发布
阅读量1.3k 收藏 10
点赞数
分类专栏： 前端综合应用 文章标签： ElmentUI vue 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjb2722404/article/details/121407406
版权

特性：

  • 数据驱动，省去一个一个写el-table-column标签和属性的烦恼，表格的表头可以存到后端。
  • 支持通过拖拽改变列的位置
  • 支持通过拖拽改变行的位置
  • 支持loading自定义
  • 支持具名插槽语法
  • 支持可选的复选框列和序号列
  • 支持自定义每一列的显示和隐藏，以及是否允许隐藏
  • 拖拽的实现依赖于sortablejs库

表格使用方式：

import TrsTable from '@/components/normal/TrsTable.vue';

<trs-table
            :table="myTable"
            :table-label="myTableLabel"
            :table-data="items"
            @sort="sortByScore"
            @lableChanged="lableChanged"
            @lableOrder="lableOrdered"
        >
            <template #trueName="{ scope }">
                <a
                    class="userName"
                    href="javascript:void(0)"
                    @click.stop="openDrawer(scope)"
                >{{ scope.row.trueName || '--' }}</a>
            </template>
            <template #position="{ scope }">
                {{ scope.row.position&&isJSON(scope.row.position)?JSON.parse(scope.row.position).name:scope.row.position||'--' }}
            </template>
            <template #percentage="{ scope }">
                <el-progress
                    v-if="scope.row.percentage&&(scope.row.percentage===0 || scope.row.percentage>0)"
                    :class="{'yydh-large':scope.row.monthlyTaskVolume>0&&scope.row.monthlyKPI > scope.row.monthlyTaskVolume}"
                    :color="(scope.row.monthlyTaskVolume>0&&scope.row.monthlyKPI>scope.row.monthlyTaskVolume)?colors2:colors"
                    :percentage="(scope.row.monthlyTaskVolume>0&&scope.row.monthlyKPI>scope.row.monthlyTaskVolume)?Math.ceil(scope.row.monthlyTaskVolume/scope.row.monthlyKPI):Math.ceil(scope.row.percentage*100)||0"
                    :format="formatlarge(scope.row)"
                >
                </el-progress>
                <div class="contrast rt">{{ scope.row.monthlyKPI || '0' }}/{{ scope.row.monthlyTaskVolume || '0' }}</div>
            </template>
        </trs-table>

表格组件属性说明

table
  • table：表格配置-对象(非必传)
属性类型说明是否必传默认值
selectBoolean是否显示复选框否false
typeBoolean是否显示序号列否false
stripBoolean是否显示斑马纹否false
heightString表格高度否40px
labelToogleBoolean能否配置表头各列的显示隐藏否false
rowKeyString数据对象主键是‘’
colDragbleBoolean列是否能拖拽改变顺序否false
rowDragbleBoolean行是否能拖拽改变顺序否false
refString表格的全局引用名称是undefined
loadingBoolean表格是否处于loading状态否否
loadingTextString表格加载loading时的提示文本否‘加载中’
typeTextString序号列表头文本否‘序号’
alignString表格对齐方式否‘left’
table-label
  • table-label: 表头字段配置-数组对象（必传，不可为空）
属性类型说明是否必传默认值
titleString列名称是
fiexdString列固定方向，leftright
sortString字段排序设置否​
widthString列宽度否
propString列对应表格数据中的字段是
formatterFunction自定义格式化方法，参数为当前行与列function（row, column） => {…}否
ellipsisBoolean是否文本溢出并在hover时tooltip显示完整文本否
alignString列数据对齐方式否‘left’
headerAlignString列表头对齐方式否如果不传，则尝试使用列的align设置，如果列的align也没传，尝试使用表格的align设置，如果表格的align也没设置，则默认为’left’;
visibleBoolean是否显示当前列否true
canHideBoolean是否允许隐藏否false
slotString具名插槽名称否不传则采用formatter函数显示数据，如果没有传formatter函数，则直接显示表格数据中的值。

示例：

[
                {
                    title: '姓名',// 列名
                    prop: 'trueName', // 字段名
                    width: '180', // 规定列宽
                    ellipsis: true, // 内容超出列宽是否显示省略符号并进行tooltip提示
                    slot: 'trueName', // 具名插槽名称
                  	align: 'center', // 内容对齐方式
                  	sort: 'custom', // 字段排序设置
                  	formatter: (row, column) => {
                        return row.monthlySpreadPoint ?? '--';
                    }, // 内容格式化方法，如果该函数和插槽同时存在，则优先使用该格式化方法
                    visible: true, // 是否显示该列
                    order: 1, // 排序序号，按照列从左至右，数字从小到大
                    headerAlign: 'center' // 该列表头对齐方式，如果不传，与align一致，如未传align,则与表格的对齐一致，如果表格对齐未传，则默认居左
                		canHide: true, // 是否可以隐藏该列，默认不传则为不可隐藏
                    fixed: 'left', // 将该列固定在左侧（left）或右侧(right),默认不传则不固定。 
                   },
                
             
    ],
table-data

表格数据， 必传

事件说明
事件名称说明回调参数
sort可排序字段表头被点击时的处理方法参数同el-table的 sort-change
labelChange头字段可见性配置发生变化时的处理方法参数是当前表头配置数组
handleSelectionChange当前表格数据勾选项发生变化时的处理方法参数同el-table的selection-change
colChange列拖拽排序后的处理方法拖拽后的列配置
rowChange行拖动后的处理方法源位置，目标位置

表格插槽使用说明

在使用el-table时，通常我们是像如下方式来使用列插槽的：

<template
	slot-scope="scope"
>
	<a
     class="userName"
     href="javascript:void(0)"
      @click.stop="openDrawer(scope)"
      >{{ scope.row.trueName || '--' }}</a>
</template>

而在trs-table中，我们使用具名插槽代替了上面的作用域插槽的写法：

 <template #trueName="{ scope }">
   <a
     class="userName"
     href="javascript:void(0)"
      @click.stop="openDrawer(scope)"
      >{{ scope.row.trueName || '--' }}</a>
  </template>

可以发先，唯一的不同就是template标签中，作用域插槽是使用slot-scope属性来将当前作用域传入插槽的，而具名插槽则是同时#slotName形式将作用域传入插槽的。
​

表头可见性配置功能说明

在这里插入图片描述

  1. 可在此处配置列的可见性，勾选的为可见，不勾选的不可见
  2. 点击此按钮切换配置功能的显示/隐藏，如果在进行取消勾选/勾选操作后，没有点击确定按钮，就点击了该按钮，则在隐藏配置功能同时恢复所有项为打开配置功能时的勾选状态
  3. 如果在进行取消勾选/勾选操作后，没有点击确定按钮，就点击了该按钮，则在隐藏配置功能同时恢复所有项为打开配置功能时的勾选状态点击此按钮隐藏配置功能，
  4. 点击确定按钮后，才更新表格个字段的可见性。并且会向父组件吐出一个``lableChanged事件，如果需要将配置保存到服务端，可在该事件中处理。

表头拖拽排序功能说明

在这里插入图片描述

  1. 可通过用鼠标拖拽列的表头类改变列在表格中的位置
  2. 可通过用鼠标拖拽行改变数据在表格中的垂直方向的次序。
  3. 拖拽列时如果有滚动条，拖动到接近左右滚动条滚动位置时，滚动条会自动滚动
  4. 固定在左侧或右侧的列无法拖拽，无法改变顺序，始终位于最左面或最右面
  5. 拖动改变顺序后，可见性配置功能中字段的位置也会发生相应变化。

源码

<template>
    <div class="swdTable">
        <div class="trs-table">
            <el-table
                :ref="table.ref"
                v-loading="table.loading"
                :data="tableDataCopy"
                :row-key="table.rowKey"
                tooltip-effect="dark"
                style="width: 100%;"
                :stripe="table.strip"
                :height="table.height || 40"
                :header-cell-style="{
                    'background-color': '#fafafa'
                }"
                :element-loading-text="table.loadingText||'加载中'"
                @sort-change="handleTableSort"
                @selection-change="handleSelectionChange"
            >
                <el-table-column v-if="table.select" type="selection" width="55"></el-table-column>
                <el-table-column v-if="table.type" :label="table.typeText||'序号'" width="60" type="index" align="center"></el-table-column>
                <el-table-column
                    v-for="(col, index) in tableLableShow"
                    :key="index"
                    :fixed="col.fixed"
                    :label="col.title"
                    :width="tableLableShow1[index].width"
                    :sortable="col.sort"
                    :prop="tableLableShow1[index].prop"
                    :formatter="col.formatter"
                    :show-overflow-tooltip="col.ellipsis"
                    :align="col.align"
                    :column-key="index.toString()"
                    :header-align="col.headerAlign || col.align || table.align || 'left'"
                >
                    <template slot-scope="scope">
                        <slot v-if="tableLableShow1[index].slot" :name="tableLableShow1[index].slot" :scope="scope">
                        </slot>
                        <span v-else>{{ tableLableShow1[index].formatter? tableLableShow1[index].formatter(scope.row, col) : (scope.row[tableLableShow1[index].prop] || '--') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="table.labelToggle" ref="trsTableToggle" class="label-toggle">
                <span class="lable-toggle-switch" @click="toggleBoxSwitch"><i class="iconfont icon-iconfontcaidan"></i></span>
                <div v-if="labelToggle" class="label-toogle-box">
                    <ul>
                        <li v-for="(col, index) in tableLableToggle" :key="index">
                            <el-checkbox
                                v-model="col.visible"
                                :disabled="isLabelDisable(col)"
                            >
                                {{ col.title }}
                            </el-checkbox>
                        </li>
                    </ul>
                    <div class="toggle-btns">
                        <el-button @click="handleLabelChangeCancel">取消</el-button>
                        <el-button type="danger" @click="handleLabelChange">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
    name: 'TrsTable',
    components: {

    },
    props: {
        table: {
            type: Object,
            default: () => {
                return {};
            },
        },
        tableLabel: {
            type: Array,
            default: () => {
                return [];
            },
        },
        tableData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            tableDataCopy: [],
            tableLableShow: [],
            tableLableShow1: [], // 复制表头，利用下标对应取值
            tableLableToggle: [],
            labelToggle: false,
            scrollSensitivity: 30, // 距离固定列边缘多少距离时开始滚动
        };
    },
    watch: {
        tableData: {
            // 监听数据变化
            handler(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.tableDataCopy = JSON.parse(JSON.stringify(newVal));
                }
                // 垂直滚动条回到顶部
                this.$nextTick(() => {
                    if (this.tableLableShow.length) {
                        this.$refs[this.table.ref].$refs.bodyWrapper.scrollTop = 0;
                    }
                });
            },
            deep: true,
            immediate: false,
        },
        tableLabel: {
            // 监听表头变化
            handler(newVal, oldVal) {
                this.dealLables();
            },
            deep: true,
            immediate: true,
        },
    },
    created() {
        var that = this;
        setTimeout(() => {
            that.dealLables();
        }, 0);
        this.tableDataCopy = JSON.parse(JSON.stringify(that.tableData));
    },
    mounted() {
        document.addEventListener('click', this.toggleMenuClose);
        setTimeout(() => {
            this.columnDrop();
            this.rowDrop();
        }, 1000);
    },
    methods: {
        toggleMenuClose(e) {
            if (this.$refs.trsTableToggle && !this.$refs.trsTableToggle.contains(e.target)) {
                if (this.labelToggle === true) {
                    this.labelToggle = false;
                    this.handleLabelChangeCancel();
                }
            }
        },
        beforeDestroy() {
            document.removeEventListener('click', this.toggleMenuClose);
        },
        // 传入的表头复制一份作为配置数组，并且根据order进行排序
        dealLables() {
            const labels = [];
            for (let i = 0; i < this.tableLabel.length; i++) {
                const obj = Object.assign({}, this.tableLabel[i]);
                labels[i] = obj;
            }
            this.tableLableToggle = labels.sort((a, b) => {
                const v1 = a.order ?? labels.length;
                const v2 = b.order ?? labels.length;
                return v1 - v2;
            });
            this.lableToggleChange();
        },
        // 勾选项发生变化的回调
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', {
                multipleSelection: val,
            });
        },
        // 表格排序回调
        handleTableSort(item) {
            this.$emit('sort', item);
        },
        // 表头字段可见性发生变化的回调
        handleLabelChange() {
            this.lableToggleChange();
            this.$emit('lableChange', this.tableLableToggle);
        },
        // 表头设置改变
        lableToggleChange() {
            this.tableLableShow = this.tableLableToggle.filter(lable => lable.visible !== false);
            this.tableLableShow1 = this.tool.deepClone(this.tableLableShow);
            this.labelToggle = false;
        },
        // 更新表头字段可见性配置列表
        updateLabelToogle({ start, end }) {
            const moveCol = this.tableLableShow1[start];
            const targetCol = this.tableLableShow1[end];
            const moveColIndex = this.getIndexOfToggleLabel(moveCol);
            const targetColIndex = this.getIndexOfToggleLabel(targetCol);
            const removeCol = this.tableLableToggle.splice(moveColIndex, 1)[0];
            this.tableLableToggle.splice(targetColIndex, 0, removeCol);
        },
        // 获取给定列在表头字段可见性配置列表中的位置索引
        getIndexOfToggleLabel(col) {
            let index;
            for (let i = 0; i < this.tableLableToggle.length; i++) {
                if (this.tableLableToggle[i].title === col.title) {
                    index = i;
                }
            }
            return index || this.tableLableToggle.length - 1;
        },
        // 切换表头字段配置列表的收缩展开
        toggleBoxSwitch() {
            this.labelToggle = !this.labelToggle;
            if (!this.labelToggle) {
                this.handleLabelChangeCancel();
            }
        },
        // 取消对表头字段可见性配置列表的更改
        handleLabelChangeCancel() {
            this.tableLableToggle = this.tableLableToggle.map((label) => {
                const labelShow = this.tableLableShow.filter((item) => item.title === label.title);
                if (!labelShow.length) {
                    label.visible = false;
                } else {
                    label.visible = true;
                }
                return label;
            });
            this.labelToggle = false;
        },
        isLabelDisable(col) {
            if (col.fixed || !col.canHide) {
                return true;
            }
            return false;
        },
        /**
         * [columnDrop description] 列拖拽
         * @return  {[type]}  [return description]
         */
        columnDrop() {
            const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
            this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                dragoverBubble: true,
                disabled: !this.table.colDragble,
                forceFallback: true,
                onEnd: evt => {
                    const oldItem = this.tableLableShow1[evt.oldIndex];
                    this.updateLabelToogle({
                        start: evt.oldIndex,
                        end: evt.newIndex,
                    });
                    this.tableLableShow1.splice(evt.oldIndex, 1);
                    this.tableLableShow1.splice(evt.newIndex, 0, oldItem);
                    this.$emit('colChange', this.tableLableToggle);
                },
                onChange: (evt) => {
                    const leftFixDom = document.querySelector('.el-table__fixed');
                    const rightFixDom = document.querySelector('.el-table__fixed-right');
                    this.autoScroll(leftFixDom, rightFixDom, evt);
                },
            });
        },
        rowDrop() {
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            const _this = this;
            Sortable.create(tbody, {
                animation: 180,
                delay: 0,
                disabled: !this.table.rowDragble,
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.tableDataCopy.splice(oldIndex, 1)[0];
                    _this.tableDataCopy.splice(newIndex, 0, currRow);
                    _this.$emit('rowChange', oldIndex, newIndex);
                },
            });
        },
        autoScroll(leftFixDom, rightFixDom, evt) {
            this.autoScrollLeft(leftFixDom, evt);
            this.autoScrollRight(rightFixDom, evt);
        },
        autoScrollLeft(leftFixDom, evt) {
            const leftDomRect = leftFixDom.getBoundingClientRect();
            if (!evt.draggedRect) {
                evt.draggedRect = evt.item.getBoundingClientRect();
            }
            if (evt.draggedRect.left - this.scrollSensitivity < leftDomRect.right) {
                this.$refs[this.table.ref].$refs.bodyWrapper.scrollLeft -= evt.draggedRect.width * 2;
            }
        },
        autoScrollRight(rightFixDom, evt) {
            const rightFixRect = rightFixDom.getBoundingClientRect();
            if (!evt.draggedRect) {
                evt.draggedRect = evt.item.getBoundingClientRect();
            }
            if (evt.draggedRect.right + this.scrollSensitivity > rightFixRect.left) {
                this.$refs[this.table.ref].$refs.bodyWrapper.scrollLeft += evt.draggedRect.width * 2;
            }
        },
    },
};
</script>
<style lang="less" scoped>
.swdTable {
    width: 100%;
    .trs-table {
        position: relative;
        .label-toggle {
            position: absolute;
            right: -10px;
            top: 10px;
            width: 200px;
            background: #fff;
            z-index: 100; // 因为列的拖动用的虚线框层级是99，所以这里要比虚线框高一层，否则无法点击到
            .lable-toggle-switch {
                position: absolute;
                right: 0;
                top: 0;
                width: 30px;
                height: 40px;
                cursor: pointer;
            }
            .label-toogle-box {
                border: 1px solid #cecece;
                padding-bottom: 15px;
                ul {
                    max-height: 50vh;
                    overflow-y: auto;
                    padding: 20px;
                    padding-right: 5px;
                    li {
                        width: 100%;
                        display: block;
                        height: 30px;
                        line-height: 30px;
                    }
                }
                .toggle-btns {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
            }
        }
        /deep/ .el-table {
            th {
                padding: 0;
                .thead-cell {
                    padding: 0;
                    display: inline-flex;
                    flex-direction: column;
                    align-items: left;
                    cursor: pointer;
                    overflow: initial;
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                    }
                    .virtual {
                        position: fixed;
                        display: none;
                        width: 0;
                        z-index: 99;
                        background: none;
                        border: 1px solid #aeaeae;
                        opacity: 0.5;
                        margin-top: -10px;
                    }
                    li {
                        list-style: none;
                        height: 40px;
                        line-height: 40px;
                    }
                }
                &.darg_active_left {
                    .thead-cell {
                        .virtual {
                            border-left: 2px dotted #666;
                        }
                    }
                }
                &.darg_active_right {
                    .thead-cell {
                        .virtual {
                            border-right: 2px dotted #666;
                        }
                    }
                }
            }
            /* stylelint-disable */
            .el-table__fixed-body-wrapper {
                top: 40px !important;
            }
            .el-table__header-wrapper {
                height: 40px;  // 动态渲染表头需要一开始就规定表头高度，否则表格高度计算会有bug
                .cell {
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
            .el-table__fixed-header-wrapper {
                .cell {
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
            .el-table__body-wrapper, .el-table__empty-block {
                min-width: 85vw;
                height: calc(100% - 40px) !important;
            }
            /* stylelint-enable */
            .el-table__fixed-right {
                right: 0;
                &::before {
                    height: 0;
                }
            }
        }
    }
    .trs-table_moving {
        /* stylelint-disable */
        /deep/ .el-table {
            th {
                .thead-cell {
                    cursor: move !important;
                }
            }
        }
        /* stylelint-enable */
        /deep/ .el-table__fixed {
            cursor: not-allowed;
        }
    }
}
</style>
hjb2722404
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Element封装一个表格组件tableList的使用方法
10-15
本文将介绍如何基于 Element UI 封装一个名为 tableList 的表格组件。该组件封装了以下功能： 1. 支持直接传入后台请求地址渲染列表，当参数变化后能自动刷新表格数据； 2. 允许用户自定义每一列的显示方式和内容；...
elementUI-plus虚拟表el-table-v2 checkbox删除后，下一个复选框又被选中且无法删除
黎小小的博客
02-16 1346
和vue 的 :key一个原理，必须设置循环数据的唯一值，才能在操作时定位到唯一数据。其他bug就是编码问题了。
element-plus 的 el-table-v2 虚拟化表格 的使用
放荒
04-30 3988
element-plus 的 虚拟化表格 的使用， 在没有使用分页等方式而数据数量很大的时候需要，直接使用表格就会出现渲染太慢，影响使用体验
vue3使用element-plus虚拟化表格组件el-table-v2（vite搭建的项目）
weixin_49991545的博客
07-17 448
vite.config.js配置。
element-plus虚拟化表格组件el-table-v2渲染自定义组件的其中两种方式(js和jsx)及注意事项
热门推荐
超小少的博客
10-12 2万+
在使用element-plus的虚拟表格化组件el-table-v2渲染数据和组件的方法时，由于官网的使用示例中只有ts或tsx版，文章则是使用js和jsx的示例及一些虚拟化表格组件的注意事项。在设置columns属性时，其中的宽度字段（width）必须设置值（只能是数字类型）且每一列都要设置，不然会出现数据不显示或是只显示一列的情况。 先看效果图（数据是mockjs随机生成的） columns属性中自定义单元格渲染器的字段是cellRenderer，类型为VueComponent/(props: Cell
vue3+elementplus基于el-table-v2封装公用table组件
黎小小的博客
04-03 4171
主要是针对表格进行封装，不包括查询表单和操作按钮。梳理出系统中通用表格的功能项，即表格主体的所有功能，生成columns列头数据、生成data表体数据、拖拉列宽、分页、生成中文列名、自定义列宽width。
【Element】el-table-v2 虚拟化表格使用+大屏自动滚动
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-09 2545
/ 鼠标放上去，停止滚动；
el-table-v2 element plus 表格虚拟滚动渲染选择器
qq_51389137的博客
11-28 4222
需要的引入 特殊项中用到的element的其他组件，vue的组件使用vue的引入方法，引入h函数构造vnode。
封装Vue Element的table表格组件的示例详解
11-19
它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它...
java开源包1
06-28
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
java开源包10
06-28
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
java开源包11
06-28
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
element plus 中的 el-table-v2 的插槽的使用，自定义表头。
m0_61395091的博客
06-08 2850
element plus 中的 el-table-v2 的插槽的使用，自定义表头。#header; #header-cell; #cell; #row; #footer; #empty; #overlay
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结
ymzhao
03-13 2万+
element-plus@2.2.0 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。
elementplus里的el-table-v2如何使用行的单击,双击事件
a0025173352的博客
12-21 1259
elementuiPlus里使用el-table-v2进行行的单击，双击等事件
关于el-table-v2无法在触摸屏上进行滚动的问题
weixin_46096462的博客
04-10 912
实现在触摸屏设备上对el-table-v2进行滚动
ElemenPlus:Virtualized Table 虚拟化表格
最新发布
qq_45061461的博客
08-12 534
在我们的项目当中，无法避免会存在，列表显示数据量大的情况，如果在el-table中显示大量数据的话，就会导致浏览器卡死，所以可以使用本次提到的 el-table-v2虚拟化表格来解决数据量多的情况下列表卡顿的问题。3.父组件传递的数据对象结构。
Vue3 + element plus + ts 实现虚拟化表格（可展开附加信息）
weixin_55042716的博客
07-21 4564
TableV1中，当一屏里超过1000条数据记录时，就会出现卡顿等性能问题，体验不是很好。通过TableV2的虚拟化表格组件，超大数据渲染将的到优化。
两种方式对el-table二次封装
weixin_42375707的博客
04-09 3606
两种方式对el-table二次封装
el-table二次封装
07-27
对于el-table的二次封装，可以通过以下步骤实现： 1. 创建一个新的组件，例如CustomTable.vue，用于封装el-table的功能。 2. 在CustomTable.vue中引入el-table和el-table-column组件，并根据需要进行配置。 3. 在CustomTable.vue中定义props属性，用于接收父组件传递的数据和配置项。 4. 在CustomTable.vue中使用v-for指令遍历props中的配置项，动态生成el-table-column组件。 5. 在CustomTable.vue中使用props中的数据渲染el-table组件。 6. 在父组件中使用<CustomTable :data="tableData" :columns="tableColumns"></CustomTable>的方式引入CustomTable组件，并传递数据和配置项。 7. 在父组件中定义tableData和tableColumns，分别用于存储表格数据和表格列的配置。 8. 在父组件中修改tableData和tableColumns的值，即可动态更新CustomTable组件的表格数据和列的配置。 通过以上步骤，可以实现el-table的二次封装，省去了重复的el-table-column代码，提高了代码的可维护性和复用性。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [两种方式对el-table二次封装](https://blog.csdn.net/weixin_42375707/article/details/130042460)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值