element Plus ----- 穿梭框数据量大导致加载慢的解决方案

最新推荐文章于 2024-07-02 16:15:39 发布
最新推荐文章于 2024-07-02 16:15:39 发布
阅读量595 收藏 7
点赞数 15
文章标签： vue.js javascript elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56300816/article/details/139775264
版权

在我们项目中可能会用到element的穿梭框组件

正常数据量几十上百条使用没什么问题，但是数据量一旦大起来就会非常之慢，比如我在做的一个项目，有一万多条数据，结果就是全选或全选转移的时候要卡顿十几秒。这非常影响用户体验。element官方好像也没给解决方法，于是我觉得手搓一个穿梭框组件

        首先先要编写出和element穿梭框一模一样的UI，我选择了用el-checkbox来实现

先写出左框

<div class="left common_main">
                    <div class="tranfer_title">
                        <div class="allCheced">
                            <el-checkbox v-model="humanCheckAll" label="Human-use APN" size="large"
                                @change="humanAllSelect" />
                        </div>
                        <div class="total">{{ humanCheck.length }}/{{ humanApnList.data.length }}</div>
                    </div>
                    <div class="serchBox">
                        <el-input v-model="humanSearch" :prefix-icon="Search"
                            placeholder="Search for humanUse"></el-input>
                    </div>
                    <div class="content">
                        <el-checkbox-group v-if="humanShowData.data.length > 0" v-model="humanCheck" class="checkGroup"
                            v-infinite-scroll="humanPageDown" :infinite-scroll-immediate="false"
                            infinite-scroll-distance="5">
                            <el-checkbox v-for="(item, index) in humanShowData.data" :label="item.apnName" :key="index"
                                @change="humanSelect(item.isCheck, item.index)" />
                        </el-checkbox-group>
                        <div v-else>
                            <div
                                style="display: flex;justify-content: center;margin-top: 15px;font-size: 14px;color: #909399">
                                <span v-if="humanSearch != ''">No Matching Data</span>
                                <span v-else>No Data</span>
                            </div>
                        </div>
                    </div>
                </div>

中间的转移按钮

<div class="swapBtn">
                    <el-button class="serviceDelivery_btn left_btn" :disabled="machineCheck.length == 0" type="primary"
                        @click="swapclick('machine')">
                        <el-icon class="el-icon--right">
                            <ArrowLeft />
                        </el-icon></el-button>
                    <el-button class="serviceDelivery_btn right_btn" :disabled="humanCheck.length == 0" type="primary"
                        @click="swapclick('human')">
                        <el-icon class="el-icon--right">
                            <ArrowRight />
                        </el-icon></el-button>
                </div>

右框

 <div class="right common_main">
                    <div class="tranfer_title">
                        <div class="allCheced">
                            <el-checkbox v-model="machineCheckAll" label="Machine-use APN" size="large"
                                @change="machineAllSelect" />
                        </div>
                        <div class="total">{{ machineCheck.length }}/{{ machineApnList.data.length }}</div>
                    </div>
                    <div class="serchBox">
                        <el-input v-model="machineSearch" :prefix-icon="Search"
                            placeholder="Search for machineUse"></el-input>
                    </div>
                    <div class="content">
                        <el-checkbox-group v-if="machineShowData.data.length > 0" v-model="machineCheck"
                            class="checkGroup" v-infinite-scroll="machinePageDown" :infinite-scroll-immediate="false"
                            infinite-scroll-distance="5">
                            <el-checkbox v-for="(item, index) in machineShowData.data" :label="item.apnName"
                                :key="index" @change="machineSelect(item.isCheck, item.index)" />
                        </el-checkbox-group>
                        <div v-else>
                            <div
                                style="display: flex;justify-content: center;margin-top: 15px;font-size: 14px;color: #909399">
                                <span v-if="machineSearch != ''">No Matching Data</span>
                                <span v-else>No Data</span>
                            </div>
                        </div>
                    </div>
                </div>

总html代码

<div class="main_dialog">
                <div class="left common_main">
                    <div class="tranfer_title">
                        <div class="allCheced">
                            <el-checkbox v-model="humanCheckAll" label="Human-use APN" size="large"
                                @change="humanAllSelect" />
                        </div>
                        <div class="total">{{ humanCheck.length }}/{{ humanApnList.data.length }}</div>
                    </div>
                    <div class="serchBox">
                        <el-input v-model="humanSearch" :prefix-icon="Search"
                            placeholder="Search for humanUse"></el-input>
                    </div>
                    <div class="content">
                        <el-checkbox-group v-if="humanShowData.data.length > 0" v-model="humanCheck" class="checkGroup"
                            v-infinite-scroll="humanPageDown" :infinite-scroll-immediate="false"
                            infinite-scroll-distance="5">
                            <el-checkbox v-for="(item, index) in humanShowData.data" :label="item.apnName" :key="index"
                                @change="humanSelect(item.isCheck, item.index)" />
                        </el-checkbox-group>
                        <div v-else>
                            <div
                                style="display: flex;justify-content: center;margin-top: 15px;font-size: 14px;color: #909399">
                                <span v-if="humanSearch != ''">No Matching Data</span>
                                <span v-else>No Data</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swapBtn">
                    <el-button class="serviceDelivery_btn left_btn" :disabled="machineCheck.length == 0" type="primary"
                        @click="swapclick('machine')">
                        <el-icon class="el-icon--right">
                            <ArrowLeft />
                        </el-icon></el-button>
                    <el-button class="serviceDelivery_btn right_btn" :disabled="humanCheck.length == 0" type="primary"
                        @click="swapclick('human')">
                        <el-icon class="el-icon--right">
                            <ArrowRight />
                        </el-icon></el-button>
                </div>
                <div class="right common_main">
                    <div class="tranfer_title">
                        <div class="allCheced">
                            <el-checkbox v-model="machineCheckAll" label="Machine-use APN" size="large"
                                @change="machineAllSelect" />
                        </div>
                        <div class="total">{{ machineCheck.length }}/{{ machineApnList.data.length }}</div>
                    </div>
                    <div class="serchBox">
                        <el-input v-model="machineSearch" :prefix-icon="Search"
                            placeholder="Search for machineUse"></el-input>
                    </div>
                    <div class="content">
                        <el-checkbox-group v-if="machineShowData.data.length > 0" v-model="machineCheck"
                            class="checkGroup" v-infinite-scroll="machinePageDown" :infinite-scroll-immediate="false"
                            infinite-scroll-distance="5">
                            <el-checkbox v-for="(item, index) in machineShowData.data" :label="item.apnName"
                                :key="index" @change="machineSelect(item.isCheck, item.index)" />
                        </el-checkbox-group>
                        <div v-else>
                            <div
                                style="display: flex;justify-content: center;margin-top: 15px;font-size: 14px;color: #909399">
                                <span v-if="machineSearch != ''">No Matching Data</span>
                                <span v-else>No Data</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

 

样式代码

.main_dialog {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            border: none;

            .left {
                width: 260px;
                height: 312px;
            }

            .swapBtn {
                width: 180px;
                height: 300px;
                display: flex;
                align-items: center;
                justify-content: center;

                button {
                    line-height: 32px;
                }

                .left_btn {
                    padding-left: 10px;
                }

                .right_btn {
                    padding-right: 10px;
                }
            }

            .right {
                width: 260px;
                height: 312px;

            }

            .common_main {
                display: flex;
                flex-direction: column;
                border: 1px solid #ebeef5;
                border-radius: 4px;

                .tranfer_title {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #f5f7fa;
                    height: 40px;
                    padding: 0 15px;
                    font-weight: 400;
                }

                .serchBox {
                    padding: 15px;
                }

                .content {
                    height: 210px;

                    .checkGroup {
                        display: flex;
                        flex-direction: column;
                        overflow: auto;
                        overflow-x: hidden;
                        height: 100%;

                        .el-checkbox {
                            padding: 8px 8px 8px 15px;
                            margin-right: 15px;
                            height: auto;

                            .el-checkbox__label {
                                width: 100%;
                                height: auto;
                                line-height: 130%;
                                word-break: keep-all;
                                word-wrap: break-word;
                                white-space: wrap;
                            }

                            .el-checkbox__label:hover {
                                color: #0085D0 !important;
                            }
                        }
                    }
                }
            }
        }

效果如图

 对于上万条数据的选择框加载也需要做一些处理，不然页面加载也是非常之慢的。

我选择了用element的无限滚动指令来进行懒加载

v-infinite-scroll
 <el-checkbox-group v-if="humanShowData.data.length > 0" v-model="humanCheck" class="checkGroup"
                            v-infinite-scroll="humanPageDown" :infinite-scroll-immediate="false"
                            infinite-scroll-distance="5">
                            <el-checkbox v-for="(item, index) in humanShowData.data" :label="item.apnName" :key="index"
                                @change="humanSelect(item.isCheck, item.index)" />
                        </el-checkbox-group>

所有的逻辑代码如下

//全选判断
let humanCheckAll = ref(false)
let machineCheckAll = ref(false)
//已选选择框数据
let humanCheck = ref([])
let machineCheck = ref([])
//搜索框数据
let humanSearch = ref('')
let machineSearch = ref('')
//全选逻辑
const humanAllSelect = (val) => {
    // humanCheck.value = val ? humanApnList.data : []
    if (val) {
        if (humanSearch.value != '') {
            humanApnList.data.filter(e => e.apnName.toLowerCase().indexOf(humanSearch.value.toLowerCase()) != -1).forEach(item => {
                item.isCheck = true
                humanCheck.value.push(item.apnName)
            })
        } else {
            humanApnList.data.forEach(e => {
                e.isCheck = true
                humanCheck.value.push(e.apnName)
            })
        }
    } else {
        humanCheck.value = []
        humanApnList.data.forEach(e => {
            e.isCheck = false
        })
    }
}
const machineAllSelect = (val) => {
    // machineCheck.value = val ? machineApnList.data : []
    if (val) {
        if (machineSearch.value != '') {
            machineApnList.data.filter(e => e.apnName.toLowerCase().indexOf(machineSearch.value.toLowerCase()) != -1).forEach(item => {
                machineCheck.value.push(item.apnName)
                item.isCheck = true
            })
        } else {
            machineApnList.data.forEach(e => {
                e.isCheck = true
                machineCheck.value.push(e.apnName)
            })
        }
    } else {
        machineCheck.value = []
        machineApnList.data.forEach(e => {
            e.isCheck = false
        })
    }
}
//单选逻辑
const humanSelect = (checked, index) => {
    // humanCheckAll.value = humanCheck.value.length == humanApnList.data.length
    // humanCheck.value = section
    let i = humanApnList.data.findIndex(e => e.index == index)
    humanCheckAll.value = humanCheck.value.length == humanApnList.data.length
    humanApnList.data[i].isCheck = !checked
}
const machineSelect = (checked, index) => {
    // machineCheckAll.value = machineCheck.value.length == machineApnList.data.length
    // machineCheck.value = section
    let i = machineApnList.data.findIndex(e => e.index == index)
    machineCheck.valueAll = machineCheck.value.length == machineApnList.data.length
    machineApnList.data[i].isCheck = !checked
}
//储存穿梭框全量数据
const machineApnList = reactive({
    data: []
})
const humanApnList = reactive({
    data: []
})
//穿梭框数据中间数组
let humanShowData = reactive({
    data: []
})
let machineShowData = reactive({
    data: []
})
//穿梭框显示
let apnDialog = ref(false)
//穿梭框一次加载多少条数据
let humanActiveNum = ref(20)
let machineActiveNum = ref(20)
//穿梭框下拉加载数据逻辑
function humanPageDown() {
    const l = humanShowData.data.length;
    const totalLength = humanApnList.data.length
    humanActiveNum.value += 20

    if (humanSearch.value != '') {
        humanShowData.data = humanApnList.data.filter(item => item.apnName.toLowerCase().indexOf(humanSearch.value.toLowerCase()) != -1).slice(0, humanActiveNum.value)
    } else {
        if (l < totalLength) {
            humanShowData.data = humanApnList.data.slice(0, humanActiveNum.value > totalLength ? totalLength : humanActiveNum.value)
        } else {
            humanShowData.data = humanApnList.data.slice(0, totalLength)
        }
    }
}

function machinePageDown() {
    const l = machineShowData.data.length;
    const totalLength = machineApnList.data.length
    machineActiveNum.value += 20

    if (this.machineSearchApnName != '') {
        machineShowData.data = machineApnList.data.filter(item => item.apnName.toLowerCase().indexOf(this.machineSearchApnName.toLowerCase()) != -1).slice(0, machineActiveNum.value)
    } else {
        if (l < totalLength) {
            machineShowData.data = machineApnList.data.slice(0, machineActiveNum.value > totalLength ? totalLength : machineActiveNum.value)
        } else {
            machineActiveNum.value = 20
            machineShowData.data = machineApnList.data.slice(0, machineActiveNum.value)
        }
    }
}
//穿梭框搜索逻辑
watch(humanSearch, (newVal) => {
    if (newVal != '') {
        humanShowData.data = humanApnList.data.filter(item => item.apnName.toLowerCase().indexOf(newVal.toLowerCase()) != -1).slice(0, humanActiveNum.value)
    } else {
        humanShowData.data = humanApnList.data.slice(0, humanActiveNum.value)
    }
})
watch(machineSearch, (newVal) => {
    if (newVal != '') {
        machineShowData.data = machineApnList.data.filter(item => item.apnName.toLowerCase().indexOf(newVal.toLowerCase()) != -1).slice(0, machineActiveNum.value)
    } else {
        machineShowData.data = machineApnList.data.slice(0, machineActiveNum.value)
    }
})

//穿梭框交换逻辑
const swapclick = (type) => {
    if (type == 'human') {
        if (humanCheckAll.value) {
            if (humanSearch.value != '') {
                let data = []
                let indexArr = []
                humanApnList.data.filter((e, index) => {
                    if (e.apnName.toLowerCase().indexOf(humanSearch.value.toLowerCase()) != -1) {
                        data.push(e)
                        indexArr.push(index)
                    }
                })
                let t = 0
                indexArr.forEach(item => {
                    humanApnList.data.splice(item - t, 1)
                    t++
                })
                machineApnList.data.unshift(...data)
            } else {
                humanApnList.data.forEach(e => {
                    e.isCheck = false
                })
                machineApnList.data.unshift(...humanApnList.data)
                humanApnList.data = []
            }
        } else {
            if (humanSearch.value != '') {
                let t = 0
                let indexArr = []
                humanApnList.data.filter((e, index) => {
                    if (e.apnName.toLowerCase().indexOf(humanSearch.value.toLowerCase()) != -1) {
                        if (e.isCheck) {
                            e.isCheck = false
                            indexArr.push(index)
                            machineApnList.data.unshift(e)
                        }
                    }
                })
                indexArr.forEach(item => {
                    humanApnList.data.splice(item - t, 1)
                    t++
                })
            } else {
                let t = 0
                let indexArr = []
                humanApnList.data.forEach((e, index) => {
                    if (e.isCheck) {
                        indexArr.push(index)
                        e.isCheck = false
                        machineApnList.data.unshift(e)
                    }
                })
                indexArr.forEach(item => {
                    humanApnList.data.splice(item - t, 1)
                    t++
                })
            }
        }
        upApnList()
        humanCheck.value = []
        humanCheckAll.value = false
    } else if (type == 'machine') {
        if (machineCheckAll.value) {
            if (machineSearch.value != '') {
                let data = []
                let indexArr = []
                machineApnList.data.filter((e, index) => {
                    if (e.apnName.toLowerCase().indexOf(machineSearch.value.toLowerCase()) != -1) {
                        data.push(e)
                        indexArr.push(index)
                    }
                })
                let t = 0
                indexArr.forEach(item => {
                    machineApnList.data.splice(item - t, 1)
                    t++
                })
                humanApnList.data.unshift(...data)
            } else {
                machineApnList.data.forEach(e => {
                    e.isCheck = false
                })
                humanApnList.data.unshift(...machineApnList.data)
                machineApnList.data = []
            }
        } else {
            if (machineSearch.value != '') {
                let t = 0
                let indexArr = []
                machineApnList.data.forEach((e, index) => {
                    if (e.apnName.toLowerCase().indexOf(machineSearch.value.toLowerCase()) != -1) {
                        if (e.isCheck) {
                            e.isCheck = false
                            indexArr.push(index)
                            humanApnList.data.unshift(e)
                        }
                    }
                })
                indexArr.forEach(item => {
                    machineApnList.data.splice(item - t, 1)
                    t++
                })
            } else {
                let t = 0
                let indexArr = []
                machineApnList.data.forEach((e, index) => {
                    if (e.isCheck) {
                        indexArr.push(index)
                        e.isCheck = false
                        humanApnList.data.unshift(e)
                    }
                })
                indexArr.forEach(item => {
                    machineApnList.data.splice(item - t, 1)
                    t++
                })
            }
        }
        upApnList()
        machineCheckAll.value = false
        machineCheck.value = []
    }
}

const upApnList = () => {
    if (humanSearch.value != '') {
        humanShowData.data = humanApnList.data.filter(item => item.apnName.toLowerCase().indexOf(humanSearch.value.toLowerCase()) != -1).slice(0, humanActiveNum.value)
    } else {
        humanShowData.data = humanApnList.data.slice(0, humanActiveNum.value)
    }

    if (machineSearch.value != '') {
        machineShowData.data = machineApnList.data.filter(item => item.apnName.toLowerCase().indexOf(machineSearch.value.toLowerCase()) != -1).slice(0, machineActiveNum.value)
    } else {
        machineShowData.data = machineApnList.data.slice(0, machineActiveNum.value)
    }
}

做出来的效果如下所示

优化成功，速度大大提升，从十几秒到毫秒级别。

hangAsic
关注
  • 15
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element树组件 实现树懒加载的过程详解
10-16
主要介绍了vue+element树组件 实现树懒加载的过程，本文通过图文实例代码相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-ui的穿梭框数据量大时点击“全选”卡顿
wcy0112的博客
03-06 593
可以将node_modules\element-ui\packages\transfer组件拎出来作为组件，针对组件的方法进行改写，再进行引用。数据量小的时候问题还没有暴露，当数据大概有几千条时，点击全选时页面需要大概需要三四秒，单选、移动操作也是如此，对于用户来说体验感很差。
vue3 + Element-Plus的transfer穿梭框组件数据量大卡顿解决方案
weixin_57145577的博客
04-18 1172
使用vue3 + Element-Plus使用transfer, 数据量2000左右页面渲染会卡顿6-8s,非常影响用户体验初步排查卡顿是由于大量dom元素渲染引起的页面卡顿,所以思路是修改element-plus源码,减少首次dom渲染数量.下载element-plus源码, 在里面找到transfer组件引入到项目中 1.element-plus源码地址:https://github.com/element-plus/element-plus 2.transfer文件地址:element-plus/
(Transfer)解决：Element-ui 中 Transfer 穿梭框因数据量过大而渲染卡顿问题的三种方法
狮子座的男孩
04-09 1526
(Transfer)解决：Element-ui 中 Transfer 穿梭框因数据量过大而渲染卡顿问题的三种方法
性能优化 | el-table中内嵌大量el-input控件导致渲染卡顿的问题
weixin_44303404的博客
05-06 1753
elementui中，el-table嵌入大量el-input的优化思路
el-transfer 数据量大时使用虚拟列表
qq_39211165的博客
04-22 3034
前言 el-transfer 加载几千个数据已经卡得不行了，毕竟页面上存在了 几千多份 dom。 由于时间紧急，打算直接拿源码出来修改。 开始 为了代码不混淆，这里使用 mixins。 有三个文件 virtual-list-mixins.js export default { computed: { contentHeight () { // 计算滚动条高度 return this.data.length * this.itemHeight } },
关于Element-UI的穿梭框数据量大时，点击‘全选’卡顿问题解决
m0_63872974的博客
03-24 4373
关于Element-UI的穿梭框数据量大时，点击‘全选’卡顿问题解决
vue+element-ui实现穿梭框数据自定义排序
12-05
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...
前端 elementUI 穿梭框大量数据分页处理
03-03
然而，当穿梭框处理的数据量非常大时，可能会导致页面卡顿，影响用户体验。针对这个问题，我们可以通过添加分页功能来优化性能。 本文将详细介绍如何在ElementUI的穿梭框组件中实现大量数据的分页处理，并提供一个...
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 ...$ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
element-plus-dev
05-24
element-plus-dev
vue3+Element Plus实现自定义穿梭框
heiniuCSDN的博客
01-29 1225
到这里你就可以使用在这个组件了。这是经过插分的代码原本还拥有表头切换的逻辑如有需要可留言.我后续可以在做整理。穿梭框的table表头是动态的html中无需修改，使用这个组件首先需要在scripe中创建如下变量。先上效果图：具体细节可以自己调整这里主要说明 派单，取消这两个按钮的实现。然后就是最重要的按钮功能。
vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）_vue 穿梭框
2401_85123689的博客
06-18 664
其实可以从最后的效果图看出这个自制的穿梭框，只是由两个table表格和两个按钮组成，只需要写其中逻辑事件即可完成穿梭框的效果，其中的事件主要分为“选中”，“穿梭”和“删除”，其实也只是关于数组的增，删，改，查这些基本操作。其中要重点注意:row-style="setColor"和@current-change=“lineClick”，这两个触发的事件分别是：选中改变颜色和选中点击的选项的数据。
elementUI实现表格穿梭框
weixin_50649221的博客
06-15 6637
elementUI有一个穿梭框组件，但是这个组件局限性比较大，就是不能实现类似表格的效果，不像antDesign的穿梭框，可以搭配Table组件实现表格穿梭框的效果，所以就花时间用elementUI自己封装了一个（源码在最后面）。
element-plus Transfer 穿梭框半成品
最新发布
YUlangML的博客
07-02 126
【代码】element-plus Transfer 穿梭框半成品。
element ui transfer 穿梭框 分页实现，接口获取、更新数据
热门推荐
xw245184020的专栏
08-05 1万+
使用穿梭框数据量大时需要分页，官方的组件并不能满足需求。数据大时不分页一次渲染页面卡。通过重新修改官方源码、封装实现分页。 1、新建TransferPanel 组件，根据官方源码修改适配 <template> <div class="el-transfer-panel" style="width: 17.5rem"> <p class="el-transfer-panel__header"> <el-checkbox v
el-table实现穿梭框效果
请叫我欧皇！的博客
06-09 1196
需求：做个一左一右的穿梭框，就是数据交换，使用el-transfer虽然可以实现，但是要做多列表形式的实现不了，所以使用el-table实现实现效果如下图：点击左边选中后点击按钮移到右边列表。
element-plus,还有element-plus-admin 前端框架
08-31
Element Plus是一个基于Vue 3的UI框架，它是对Element UI的升级和改进。Element Plus提供了一套丰富的组件和工具，可以帮助开发人员快速构建现代化的Web应用程序。 而element-plus-admin是一个基于Vue 3和Element Plus的管理后台模板。它内置了动态路由、权限验证等功能，同时提供了丰富的功能组件和多页配置，可以作为项目的启动模板，帮助开发人员快速搭建后台管理系统。 该模板还解决了Vue 3和Element Plus写法和优点的兼容性问题，使开发更加便捷。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [admin，vue-element-admin，vue-admin-beautiful-pro主线版本基于element-plus，element-ui，ant-design-...](https://download.csdn.net/download/weixin_42132598/15096102)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [element-plus-admin：基于Vue 3和ElementPlus的管理样板](https://download.csdn.net/download/weixin_42140846/15474989)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案](https://download.csdn.net/download/weixin_42136826/16209813)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值