ElementUI问题汇总---kalrry
问题汇总
一、(el-table)表格问题
1、el-table表格高度自适应：
【问题描述】
为了让el-table表格在空数据的情况下让el-table边框充满父级盒子
【解决办法】
//el-table外层盒子要有具体高度尺寸，<div style="height: 100%">
<el-table height='calc(100% - 20px)'>
//或
<el-table height='calc(100vh - 20px)'>
//其中减号后面的数值是自定义的，根据实际情况更改
2、el-table表格宽度自适应：
【问题描述】
做数据管理系统的时候(左菜单，右表格)，给el-table组件的最外层盒子使用了(flex：1)布局，但在初次加载时的el-table宽度正常，可是随着浏览器窗口变大，el-table组件跟着变大，但是当浏览器窗口变小的时候el-table组件的宽度还是原来的宽度，有时候会挤掉左边菜单栏或者向右溢出，el-table并没有随窗口自适应；
【解决办法】
//这种场景一般是在左右布局的情况下给el-table的最外层父级盒子设置了flex：1；的css属性
//例如是左右结构的布局(左菜单，右表格)
//此时只需要在右侧表格的最外层父级盒子设置position: relative;的相对定位属性方可解决上述问题
.right {
flex: 1;
position: relative;
}
//看el-table是否有次级外层盒子而定，position:absolute;
.el-table{
position:absolute;
}
3、el-table表格分页
4、el-table表格不分页情况下懒加载
也就是el-table表格滚动加载：https://www.jb51.net/article/135800.htm
vue项目用到 element 表格组件，当数据量过大(一般超过千条以上)时造成页面卡顿。
解决方案：
【需求不让使用分页情况下】
【可以使用分页】
- 直接使用表格组件分页功能
5、slot-scope="scope"报错
在vue3中 scope已经取消
<template #default="row">
</template>
6、el-table设置表头和表内容样式自定义
https://www.jianshu.com/p/154118fc88e4
7、el-table行点击变色
//highlight-current-row通过此属性控制，常用来点击行编辑指示所编辑行
<el-table :highlight-current-row="true"
二、(el-dialog)弹窗问题
1、el-dialog动态设置宽度问题
<el-dialog v-model="dialogFormVisible" title="信息维护界面" :width="width">
//给绑定width在data中写入数值
2、dialog弹窗销毁/弹窗拖拽
https://blog.csdn.net/qq_42784165/article/details/108118506
3、el-dialog关闭并清除表单数据
this.$refs[“elForm”].resetFields();
9、ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台
https://blog.csdn.net/dujing_15620553271/article/details/102842789
三、(el-tree)弹窗问题
1、el-tree 自定义logo图标
https://www.cnblogs.com/5201314m/p/12932790.html
https://www.modb.pro/db/198036
https://blog.csdn.net/Fish_waste/article/details/121243884
四、(el-form)弹窗问题
1、Element表单自动生成器
通过拖拽自动生成element表单代码
生成器：form generator
Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中。
网站地址:https://mrhj.gitee.io/form-generator/#/
GitHub:https://gitee.com/mrhj/form-generator
五、(el-tooltip)弹窗问题
1、el-tooltip小提示换行
采用插槽的方式，注意vue2与vue3插槽的区别
<el-tooltip class="item" effect="dark" content placement="right">
//这里content对应的是el-tooltip里面的content属性
<template #content>
<span>①.方案达标率：当年实际日产气能力*300/设计产能;</span><br />
<span>②.年底标定情况：所选月份所在年度最后一个月（12月份）的生产情况;</span><br />
<span>③.符合率：实际产能/新建产能。</span>
</template>
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
vue3插槽示例
<template v-slot:default="scope">
<slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
</template>
封装Element-UI
一、封装el-table
方式一
<template>
<el-table :data="tableData" :highlight-current-row="highLight" class="mytable" border :fixed="fixed" size="small" :style="widthTable" @row-click="rowClick" :max-height="tableHeight" ref="table">
<el-table-column type="index" align="center" label="排名" width="50px" fixed>
</el-table-column>
<el-table-column v-for="(item, index) in columns" :key="index" align="center" :prop="item.prop" :label="item.label"
:fixed="item.fixed" :width="item.width" :min-width="item.minWidth">
<template v-slot:default="scope">
<slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
props: {
border: {
type: Boolean,
default: false,
},
// showIndex: {
// type: Boolean,
// default: false,
// },
tableData: {
type: Array,
default: [],
},
widthTable: {
type: String,
// default: {}
},
columns: {
type: Array,
default: [],
},
highLight: {
type: Boolean,
default: false
},
cellStyle: {
type: Function,
},
tableHeight: {
type: String,
// default: '110'
},
fixed: {
type: Boolean,
}
},
methods: {
//表单选择全选
handleSelectionChange(val) {
this.$emit("handleSelectionChange", val);
},
indexMethod(index) {
return index + 1 + (this.currentPage - 1) * 10;
},
rowClick(row, column, event) {
this.$emit("rowClick", row)
}
},
};
</script>
<style scoped lang="less">
</style>
方式二
封装
//创建时间：2021年4月8日
//封装包含功能：多选（单行根据条件禁用）、排序、常见状态{code，msg}、自定义column内容、switch开关、图片、点击任意不含前面类型的文字，可编辑、行操作。基本满足于常见table列表
<template>
<div>
<el-table size="medium" :data="tableData" :stripe="false" :border="false" :fit="true" :show-header="true"
:highlight-current-row="true" v-loading="columObj.loading" :row-class-name="tableRowClassName"
@row-click="rowClick">
<!-- 选择框是否开启，selectable控制是否单行禁用 -->
<el-table-column v-if="columObj.selection" type="selection" :selectable="columObj.selectable">
</el-table-column>
<!-- 普通列 -->
<el-table-column v-for="(column,columIndex) in columObj.columnData" :key="columIndex" :prop="column.prop"
:label="column.label" :width="column.width" :fixed="column.fixed" :align="column.align || 'center'"
:sortable="column.sortable" :index="columIndex" show-overflow-tooltip>
<template slot-scope="{row,$index}">
<!-- 默认展示 -->
<span v-if="column.text && column.editRow != $index">{{row[column.prop]}}</span>
<!-- 状态对象展示 -->
<span v-if="column.status && row[column.prop]">{{row[column.prop].msg}}</span>
<!-- 自定义内容 -->
<span v-if="column.ownDefined">{{column.ownDefinedReturn(row,$index)}}</span>
<!-- switch开关 -->
<el-switch v-if="column.switch" v-model="row[column.prop]"
:inactive-text="row[column.prop] ? column.openText:column.closeText"
@change="switchChange(row,$index,column.prop)"></el-switch>
<!-- 图片展示 -->
<el-popover trigger="hover" placement="top" popper-class="popper">
<img v-if="column.image" :src="viewUrl + row[column.prop]" />
<el-image slot="reference" v-if="column.image" :src="viewUrl + row[column.prop]"></el-image>
</el-popover>
<!-- 可编辑input，仅在text默认展示类型才可编辑-->
<el-input v-focus v-if="column.editRow == $index && column.text" v-model="row[column.prop]"
@blur="editInputBlur(row,$index,column.prop,columIndex)"></el-input>
<!-- 操作按钮 -->
<span v-if="column.isOperation" v-for="(operations, index) in column.operation" :key="index">
<el-button v-if="operations.isShow(row,$index)" :icon="operations.icon" :type="operations.type"
@click="rowOperation(row,$index,operations.operation)" :style="{color:operations.color}"
size="small">{{operations.label}}</el-button>
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="page_div" :style="{textAlign: pageObj.position || 'center'}">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:hide-on-single-page="false" :current-page="pageObj.pageData.page" :pager-count="7"
:page-sizes="[10, 15, 20, 30,50]" :page-size="pageObj.pageData.size" background
layout="total,sizes,prev, pager, next" :total="pageObj.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
directives: {
// 自定义指令,用于可编辑input自动获取焦点
focus: {
inserted: function(e) {
e.querySelector('input').focus()
}
}
},
props: {
tableData: {
type: Array,
required: true
},
columObj: {
type: Object,
required: true
},
//columObj.type(如果为""空，就不会加载多选框，或者index编号),lazy(是否支持懒加载)
//columnData.columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
//prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
//如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
pageObj: {
type: Object,
required: true
}
},
data() {
let readUploadFileUrl = this.$store.state.user.readUploadFileUrl;
return {
viewUrl: readUploadFileUrl,
}
},
methods: {
// 行操作
rowOperation(row, $index, now) {
this.$emit("rowOperation", row, $index, now)
},
// switchChange调用
switchChange(row, $index, prop) {
this.$emit("switchChange", row, $index, prop);
},
// 帮助点击行，获取点击的下标
tableRowClassName({
row,
rowIndex
}) {
row.rowIndex = rowIndex;
},
// 点击行
rowClick(row, column, event) {
this.$emit("rowClick", row, column, event);
},
// 可编辑input失去焦点
editInputBlur(row, $index, prop, columIndex) {
this.$emit('editInputBlur', row, $index, prop, columIndex);
},
// 条数变化
handleSizeChange(e) {
this.$emit('handleSizeChange', e);
},
// 页码变化
handleCurrentChange(e) {
this.$emit('handleCurrentChange', e);
}
}
}
</script>
<style lang="less" scoped>
.el-button {
margin: 0 6px;
}
/deep/.el-input__inner {
border: none;
}
/deep/.el-image__inner {
height: 50px;
}
// switch左边文字颜色
/deep/.el-switch__label--left {
color: #606266;
}
img {
height: 400px;
}
.page_div {
padding: 15px 0;
}
</style>
父组件调用
<template>
<div>
<publicTable :tableData="tableData" :columObj="columObj" :pageObj="pageObj" @rowOperation="rowOperation"
@switchChange="switchChange" @editInputBlur="editInputBlur" @rowClick="rowClick"
@handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
</publicTable>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
pageObj: { //分页对象
position: "left", //分页组件位置
total: 100,
pageData: {
page: 1,
size: 10
}
},
tableData: [{
id: '1',
date: '2016-05-02',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
switchs: true,
img: 'file/964355654_58490652-91c5-412e-a74b-0c3d86ff1525.png',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '2',
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
switchs: true,
img: 'file/964355654_58490652-91c5-412e-a74b-0c3d86ff1525.png',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '3',
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
switchs: true,
img: 'file/964355654_58490652-91c5-412e-a74b-0c3d86ff1525.png',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '4',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
switchs: true,
img: 'file/964355654_58490652-91c5-412e-a74b-0c3d86ff1525.png',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}],
columObj: {
// 选择框
selection: true,
// 选择框根据条件是否可选
selectable: (row, index) => {
if (row.switchs) {
return true;
}
},
lazy: "true",
//column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
//prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
columnData: [{
text: true,
prop: "date",
editRow: undefined,
label: "默认样式",
width: "",
align: "center",
}, {
text: true,
prop: "id",
label: "可以排序",
width: "",
align: "center",
editRow: undefined,
sortable: true, //开启排序
},
{
status: true,
prop: "objmsg",
label: "obj类型（mesage）",
width: "",
align: "center",
sortable: false,
},
{
ownDefined: true,
prop: "address",
label: "自定义返回内容",
width: "",
align: "center",
sortable: false,
ownDefinedReturn: (row, $index) => {
return row.address
}
},
{
switch: true,
prop: "switchs",
label: "switch开关",
width: "",
align: "center",
openText: "打开",
closeText: "关闭",
sortable: false,
},
{
image: true,
prop: "img",
label: "图片",
width: "",
align: "center",
sortable: false,
},
{
text: true,
editRow: undefined,
prop: "name",
label: "点击可编辑",
width: "",
align: "center",
sortable: false,
},
//如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
isOperation: true,
label: "操作",
width: "180",
align: "center",
sortable: false,
operation: [{
operation: "edit",
type: "text",
label: "编辑",
icon: "",
color: 'red',
isShow: (row, $index) => {
return true;
}
}, {
operation: "delete",
type: "text",
label: "删除",
icon: "",
color: 'blue',
isShow: (row, $index) => {
return true;
}
}, {
operation: "see",
type: "primary",
label: "查看",
icon: "",
color: '',
isShow: (row, $index) => {
return true;
}
}]
},
],
},
}
},
beforeCreate() {},
created: function() { //在模板渲染成html前调用
},
beforeMount() {
},
mounted() { //在模板渲染成html后调用
},
beforeUpdate() {
},
updated() {
},
methods: {
rowOperation(row, $index, now) {
console.log(row, $index, now)
},
switchChange(row, $index, prop) {
console.log(row, $index, prop)
},
rowClick(row, column, event) {
// 点击行触发，编辑点击的所在列，排除selection选择框
if (column.type != 'selection') {
this.columObj.columnData[column.index].editRow = row.rowIndex;
}
},
editInputBlur(row, $index, prop, columIndex) {
this.columObj.columnData[columIndex].editRow = -1;
},
//页码变化
handleCurrentChange(e) {
this.pageObj.page = e;
},
//条数变化
handleSizeChange(e) {
this.pageObj.size = e;
this.pageObj.page = 1;
},
},
watch: { //监听
},
destroyed() { //销毁后
}
}
</script>
<style lang="scss">
</style>
方式三、el-table表格的增加、修改和删除封装参考
1、封装el-tableel-table表格的增加、修改和删除封装
好东西
2、封装el-table表格参考—重点看
3、简单封装el-table表格组件
4、el-table二次封装详细版(二)
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
