ElementUI Plus

已于 2023-05-21 12:01:43 修改
阅读量1.3w 收藏 41
点赞数 18
分类专栏： 笔记 文章标签： vue elementui
于 2022-04-12 21:22:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52240489/article/details/124133868
版权

ElementUI Plus

官方文档

文章目录

前言

只是记录自己在使用Element + 的过程中遇到的问题，并不一定适用于全部场景!!!

一、ElementUI Plus之Table

1.基础用法

基础用法及更多用法直接查看官方文档：Element

2.多选框改为单选框的解决办法

需求：单选表格的某一行数据进行操作
解决方案：
😮官方给出的
👍网友提出的
🌂我自己采用的解决方案如下
插槽使用radio
①在表格数据的最前面添加一列

<el-table-column>
</el-table-column>

②往这一列中加入插槽

<el-table-column>
 <template #default="scope">
  </template>
</el-table-column>

③往插槽中放入 单选框

<el-table-column>
 <template #default="scope">
   <el-radio v-model="tableData.tableRadio" :label="scope.row" @change="handleSelectionChange">{{""}}</el-radio>
  </template>
</el-table-column>

//获取数据
const handleSelectionChange = (val: any) => {
        var data = JSON.parse(JSON.stringify(val));
        console.log("选中的数据", data);
}

对于单选框的属性去官网查看文档 单选框属性

3.实现手风琴效果（只展开一行）

树形数据与懒加载
Table 属性

需求：树形加载的表格数据，只需要展示一行而不是展开多行。
解决方案：

重点关注这两个属性
expand-row-keys：目前的展开行，需要设置 row-key 属性
expand-change：当用户对某一行展开或者关闭的时候会触发该事件

<el-table
	:data="filterTableData"
	row-key="id"
	:expand-row-keys="tableData.expands"
	:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
	@expand-change="expndChange"
	border>
	<el-table-column prop="label" label="部门名称" />
</el-table>

事件函数使用了ts的语法，和Js大体一致只是可以对参数限制类型

//展开的节点
    const expndChange = (data: any, index: any) => {
    		//index 展开属性 true，false
        //每次触发前先清空
        tableData.expands = [1 + ""]
        if (index) {
            // 每次push进去的是每行的ID
            tableData.expands.push(data.id + "")
        } else {
            tableData.expands = [1 + ""]
        }
    }

**注意expand-row-keys绑定的值类型为array，里面存放的字符串是，而不是number，所以你会看到我的tableData.expands = [1 + “”]在后面取到值后在后面加了 +“” 进行处理 **

4.实现表格点击新增和删除效果

需求：需要使用表格来实现表单的效果（数据的新增）。点击按钮，新增一行，在该行写入数据，再点击一行，再写入数据，最后点击保存按钮即可将所有的数据进行保存。
解决方案：上代码，注意注意👉 el-table-column里面使用的时插槽的方法对数据进行了绑定
表格代码：

<el-table :data="tableData.list" ref="table" tooltip-effect="dark" border stripe style="width: 100%"
                max-height="250">
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="driver" label="驾驶员" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.driver"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="plateNumber" label="车牌号" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.plateNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button text size="small" @click.prevent="deleteRow(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button class="mt-4" style="width: 100%" @click="addRow()">新增</el-button>

页面的参数及方法

//list用于存储创建的每一行数据
const tableData = reactive({
    list: [] as any
})

//删除行数据
const deleteRow = (index: number) => {
    console.log("需要删除的行", index)
    //移除数组中下标为index的行
    tableData.list.splice(index, 1);
}
//新增一行空数据
const addRow = () => {
    var list: any = {
        driver: '',
        plateNumber: ''
    }
    tableData.list.push(list);
    addData.list = tableData.list;
}

完整代码：

<!-- 新增车辆弹窗 -->
<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
        @onClose="onClose" @onConfirm="confirm">
        <template v-slot:content>
            <el-table :data="tableData.list" ref="table" tooltip-effect="dark" border stripe style="width: 100%"
                max-height="250">
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="driver" label="驾驶员" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.driver"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="plateNumber" label="车牌号" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.plateNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button text size="small" @click.prevent="deleteRow(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button class="mt-4" style="width: 100%" @click="addRow()">新增</el-button>
        </template>
    </SysDialog>
</template>
<script setup lang='ts'>
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { reactive } from "vue";
//弹框属性
const { dialog, onShow, onClose } = useDialog()
//表格数据
const tableData = reactive({
    list: [] as any
})
//录入的车辆信息向父组件传递
const addData = reactive({
    list: [] as any
})
//弹窗展示
const show = () => {
    //设置弹框的宽度
    dialog.width = 650;
    dialog.height = 450;
    dialog.title = "车辆信息"
    //显示弹框
    onShow();
}

//删除行数据
const deleteRow = (index: number) => {
    console.log("需要删除的行", index)
    //移除数组中下标为index的行
    tableData.list.splice(index, 1);
}
//新增一行空数据，点击新增一行按钮，创建一条对应的空元素
const addRow = () => {
    var list: any = {
        driver: '',
        plateNumber: ''
    }
    tableData.list.push(list);
    addData.list = tableData.list;
}
//子组件传值给父组件
const emit = defineEmits(['selectData'])
//弹框确定
const confirm = () => {
    emit('selectData', addData)
    console.log("传出的数据==>", addData)
    onClose();
}
//暴露方法给外部使用
defineExpose({
    show
})
</script>

5.el-Input框和其他控件宽度不统一的设置技巧

最根本的解决办法：使用style设置统一的宽度！！！

①el-input与el-date-picker长度不一致

原因：因为el-date-picker左侧会有一个icon的图标，而这个图标就回占据一定的宽度。
在这里插入图片描述 解决方法：使用占位图标:也就是在input上默认追加一个图标

<el-input disabled suffix-icon="el-icon-date"></el-input>

②el-input与el-select长度不一致

原因：因为el-select右侧有有一个icon的图标，而这个图标就回占据一定的宽度。
在这里插入图片描述解决方法：
Ⅰ、使用占位图标:也就是在input上默认追加一个图标

<el-input disabled suffix-icon="el-icon-date"></el-input>

Ⅱ、有时候会有另外一种情况我这里没有截图，只是之前遇到了记录一下，只需要设置select的宽度为100%即可

<el-select style="width:100%">

6.el-table表格的合计行放到首行

问题描述：element plus 的表格合计默认是放到了表格的末尾，但是现在需要将表格的合计放到表格的头部
解决方案：修改element plus的样式,网上说使用flex后会有样式冲突，目前使用情况没有发现冲突，有的话请评论区指正一下😂草草记录一下避免自己忘记

<style scoped lang='scss'>
:deep(.el-table) {
    display: flex;
    flex-direction: column;
}

:deep(.el-table .el-table__inner-wrapper) {
    order: 1;
}
</style>

7.el-table 表头复选框隐藏

问题描述：需要将表格的表头复选框给隐藏掉
解决方案：修改element Plus的对应样式

<style scoped lang="scss">
//隐藏表头的复选框
:deep(.el-table__header-wrapper .el-checkbox__inner){
    //background-color: red !important;
    display: none;
}
</style>

8.表格复选将某一行复选框禁用

问题描述：有时候需要将某一行的复选框禁用，比如：需要提交某一行的数据时，只允许用户选中未提交的数据，而已经提交的数据则直接不允许勾选。
解决方案：
找到复选框的那一列，新增一个 :selectable方法事件

<el-table-column type="selection" :selectable="selectable" width="50"></el-table-column>

// 是否禁用当前复选框
const selectable=(row:any, index:any)=>{
    if (row.isAudit == 'true') { // 成立的条件:就是什么时候需要禁用
        return false;
    } else {
        return true;
    }
}

8.表格前端分页

问题：有时候我们不需要从后台进行数据的分页处理，只需要在前端获取了数据后进行分页
解决方案：

<el-table :height="tableHeigth"
                        :data="filterTableData.slice((listParm.currentPage - 1) * listParm.pageSize, listParm.currentPage * listParm.pageSize)"
                        border stripe>
                       
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination @size-change="sizeChange" @current-change="currentChange"
                        :current-page.sync="listParm.currentPage" :page-sizes="[10, 20, 40, 80, 100]"
                        :page-size="listParm.pageSize" :total="filterTableData.length"
                        layout="total, sizes, prev, pager, next, jumper" background></el-pagination>

业务部分

//分页参数
const listParm = reactive<UserListParm>({
        deptId: '',
        pageSize: 10,
        currentPage: 1,
        total: 0,
        loginName: ''
    })
//页容量改变时触发
const sizeChange = (size: number) => {
        listParm.pageSize = size;
}
//页数改变时触发
const currentChange = (page: number) => {
        listParm.currentPage = page;
}

主要注意一下啊表格data绑定的数据这里

:data="filterTableData.slice((listParm.currentPage - 1) * listParm.pageSize, listParm.currentPage * listParm.pageSize)"

9.表格原样导出

问题描述：需要将制作好的表格数据生成excel直接导出到本地
解决方案：不需要第三方插件库 使用blob 可以直接原样输出
给需要导出的element 表格新增一个 Id 属性，使用元素选择器进行选择导出

在这里插入图片描述

const demo = () => {
const tables: any = document.querySelectorAll('tr');
    for (let i = 0; i < tables.length; i++) {//给所有的tr标签加边框 不然导出无边框
        tables[i].style.border = '0.1px solid black';
    }
    var html = "<html><head><meta charset='utf-8' /></head><body>" + document.querySelectorAll("#MainTable")[0].outerHTML + "</body></html>";
    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
    var url = URL.createObjectURL(blob);
    var a = document.createElement("a");
    a.href = url;
    a.download = "报表.xls";
    a.click();
    URL.revokeObjectURL(url);
}

注意：第一点处理边框已经包含在上面代码里面，看实际情况处理，这里只是做一个记录
1.导出的数据可能在页面上看有边框，但是呢，导出后本地没有？？？
解决：需要重新给表格设置边框,代码如下，同时还需要对element的表头单独进行设置不然的话表头会没有边框
在这里插入图片描述

:header-cell-style="{ border: '1px solid', color: 'black', borderColor: '#EEF0F6' }"

onMounted(async () => {
//寻找所有的tr,并为所有的tr加上边框，不加导出没有边框
    const tables: any = document.querySelectorAll('tr');
    for (let i = 0; i < tables.length; i++) {
        tables[i].style.border = '1px solid #EEF0F6';
        //tables[i].style.backgroundColor = '#85A000';
    }
    })

2.使用官方的合并单元格方法后导出发现错位？？？

element-ui表格单元格合并后数据出现偏移问题及导出后合计行错位

10.前端简单对表格数据过滤

/**
* menuTable.list 为表格数据
* DataSet.search 为搜索的关键词
* data.title 为被检索的关键词
*/
const filterTableData = computed(() =>
    menuTable.list.filter(
        (data: any) =>
            !DataSet.search || data.title.toLowerCase().includes(DataSet.search.toLowerCase())
    )
)

<!---------------------------------------------------->
 <el-input v-model="DataSet.search" placeholder="输入一级目录名称" clearable :prefix-icon="Search" />
 
 <!--注意data绑定的是被检索后的值-->
  <el-table  :data="filterTableData"  ></el-table>

二、 ElementUI Plus之From

  1. element-ui的form表单中，阻止input输入框回车提交
    问题：element的form表单中有一个el-input时，在input中回车时会触发表单提交，并且页面会被刷新
    解决方法：为Form表单加下面这个属性来阻止事件的触发
    @submit.native.prevent
<el-form :model="form" @submit.native.prevent></el-form>

2、el-checkbox如何同时获得value值和label的值

 <el-checkbox-group v-model="state.checkList">
                                <el-checkbox v-for="(item,index) in state.sendList" :key="index" :label="item.id" >{{ item.sendName }}</el-checkbox>
                            </el-checkbox-group>

直接使用花括号绑定需要显示的值 label标签绑定value值

不学习何以强国
关注
  • 18
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Element-UI
weixin_50027754的博客
12-15 36
Element-UI的基本使用 Element-UI:一套为开发者，设计师和产品经理准备的基于Vue 2.0 的桌面端组件库 官方地址为 http://element-cn.eleme.io/#/zh-CN
十分钟带你入门Element Plus UI框架开发
最新发布
Go与Python双剑合一
06-04 1072
本文介绍了如何在Vue 3项目中使用Element Plus UI框架进行页面开发，系统讲解了Element Plus的安装、按需导入相关插件的安装以及在Vite.config.js中进行插件的配置；Element Plus支持国际化，它默认的语言时英语，所以本文也演示了如何在main.js中将Element Plus的显示语言设置为中文。最后通过实践的方式，从项目搭建开始，演示了在项目中使用Element Plus的级联组件完成了省市的选择。
Element UI 及 Element Plus框架
热门推荐
Jim Zheng
11-16 3万+
既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack。当然Element UI与有React及Angular的版本了。一，何为Element UI 及 Element Plus？二、Element UI 与 Element Plus区别？三、Element UI 与 Element Plus使用。而Element UI是基于Vue 2.目前还处于快速开发迭代中。
【前端】Element-UI和Element-Plus的区别
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-22 1万+
【前端】Element-UI和Element-Plus的区别
Element Plus介绍
DevCorner的Pro技术博客
05-12 1万+
Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UIKit）。它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用。
Element UI Plus的安装和使用
Aresnine的博客
02-21 2787
Element Plus 支持通过 SCSS 变量来自定义主题。你可以在项目中覆盖默认的 SCSS 变量来定制主题。
Element Plus 实例详解（一）___安装设置
逆境清醒的博客
03-23 3万+
Element Plus是基于Vue 3，面向设计师和开发者的组件库。一、前言。二、安装方法。三、Element Plus用法。四、Element Plus 安装使用小实例
Vue3.0 + Vite + Typescript + Sass + ElementUI plus , 后台系统 .zip
01-02
Vue3.0、Vite、Typescript、Sass以及ElementUI Plus是现代前端开发中一组强大的技术栈，常用于构建高效、可维护的后台管理系统。本文将深入探讨这些技术及其在构建后台系统中的应用。 首先，Vue3.0是Vue.js框架的...
Vue3+elementui plus创建项目的方法
01-18
1.使用elementui plus版本实现按需加载组件会报错 Error: Cannot find module ‘babel-preset-es2015’ from ‘D:\danzhukeji\danzhu\my_pp\src’ 这样的情况下 { presets: [[es2015, { modules: false }]], ...
idea-elementUI-plugin.zip
12-01
idea element ui 提示插件。 安装：1、先安装vuejs插件；2、本地安装idea-elementUI-plugin.jar；3、重启idea即可。 使用：在页面写 即可提示。
element plus 手册离线
03-25
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建现代化的 Web 应用程序。这个"element plus 手册离线"版本是为了那些在网络不稳定或者无法连接到互联网的情况下，依然能...
vue elementUI使用tabs与导航栏联动
10-16
主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ElemenPlus与ElementUI
秋书一叶的博客
08-26 8169
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。
【Vue】Element Plus和Element UI中插槽使用
SqlloveSyn的博客
06-06 1万+
今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法，一般情况下vue2使用Element UI这个组件库，表格组件的插槽的话一般都是使用v-slot，而vue3使用Element Plus组件库，表格组件中插槽一般为#default，下面就来讲一下这两个。以上就是本章的全部内容，自己总结的，可能想法会有不同之处，希望能够帮助到您。
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 9701
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
Element-Plus 实现动态渲染图标教程
interest_ing_的博客
03-27 2021
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在 Element-Plus 中，我们可以使用 `` 标签来动态渲染组件，这使得在菜单中根据条件动态显示不同的图标成为可能。本文将介绍如何使用 Element-Plus 和 Vue.js 来实现动态渲染图标的功能。
Element Plus 基本使用
qq_62377885的博客
03-23 4177
Element Plus 基本使用官网地址element-plus 基本使用具体部署请看。
elementui plus
08-17
Element Plus 是一套基于 Vue.js 的桌面端组件库，是从 Element UI 组件库演进而来的。它提供了一系列高质量、易用且功能丰富的组件，帮助开发者快速搭建现代化的 Web 应用程序。Element Plus 的设计风格简洁、美观...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不学习何以强国

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值