avue源码修改过程(持续更新)
一、crud 组件，想搜索显示顺序、表单显示顺序、和表格列表显示顺序互不影响源码分析:form/index.vue 文件修改代码：
·
一、crud 组件，想搜索显示顺序、表单显示顺序、和表格列表显示顺序互不影响
源码分析:
form/index.vue 文件
修改代码：
使用：
二、缓存表格列表配置
源码分析：avue\packages\core\common\init.js
需要页面自己去监听defaults的变化，我们业务基本所有页面都需要缓存，所有为了避免代码的重复性，重新进行的封装
修改代码
使用：
三、avue 中未导出hearderSearch、dialogForm，table的单独组件
实践的三种方式：
1、直接复制组件进行修改（参考集抄平台）
2、直接导出组件，但是报错（因为单组件中注入了值“”curd）
3、直接通过v-if控制显示
修改代码
文件：curd/index.vue 
使用方法：
四、单独使用avue中的dialog（里面封装了拖动、全屏功能），添加插槽功能
1、分析源码 dialog-form
源代码中dialog-form 没有插槽功能，在修改代码中添加插槽功能
2、修改源码，添加插槽
3、使用
五、修改dialog 样式，设置max-height，并添加内容滚动条
修改样式源码
六、avue解决日期范围选择框不联动
1、修改源码 packages/core/components/form/index
2、使用
七、avue 通过配置方法，快速修改单元格的展示内容 （拼接字符串，字符串转标签）
1、修改代码 文件packages/element-ui/crud/column.vue
2、使用方法
八、avue 提交表单是否显示loading
1、修改源码（1、监听allDisabled 的变化）
2、使用方法（可通过配置提交表单时是否显示loading）
九、修改搜索组件样式（搜索按钮固定、一行固定3列）
1、修改源码 （参照git提交代码 ）1、packages\element-ui\crud\header-search.vue；2、packages\element-ui\form\vue
2、使用方法
十、elementUI table 实现表格的多列排序
1、效果图
2、主要实现代码
2.1、el-table组件
:default-sort="getDefaultSortParams" //设置排序默认值
:header-cell-class-name="headerCellClassNameFun" //设置头部样式方法
@sort-change="sortChange" //排序事件
2.2、data
sortParams: {},//记录排序参数
isFirstTableSort: true,//是否首次排序
2.3、props
//是否多列排序
isMultiOrder: {
type: Boolean,
default: false,
},
headerCellClassName: Function,//头部样式方法
tableOption.defaultSort:Onject，//默认排序
2.4、处理默认排序computed
getDefaultSortParams() {
let sortParams = {};
if (this.isFirstTableSort) {
sortParams = this.vaildData(this.tableOption.defaultSort, {
prop: "createTime",
order: "descending",
});
let name = sortParams.prop;
this.sortParams = {
[name]: sortParams.order,
};
this.formateOrderData(this.sortParams, false);
this.isFirstTableSort = false;
}
return sortParams;
},
2.5、headerCellClassNameFun 方法
headerCellClassNameFun({ column, rowIndex }) {
//处理默认值的情况
if (this.isMultiOrder) {
if (
!this.validatenull(column.order) &&
this.validatenull(column.multiOrder)
) {
column.multiOrder = column.order;
} else {
column.order = column.multiOrder;
}
}
if (typeof this.headerCellClassName == "function") {
return this.headerCellClassName({ column, rowIndex });
}
},
2.6、驼峰转下划线方法
camecaseToLine(name) {
return name.replace(/([A-Z])/g, "_$1").toLowerCase();
},
2.7、排序回调
sortChange({ column, prop, order }) {
if (this.isMultiOrder) {
column.multiOrder = order;
} else {
//清空缓存的数据
this.sortParams = {};
}
this.sortParams[prop] = order;
//格式化数据
this.formateOrderData(this.sortParams, true);
},
2.8、格式化数据
formateOrderData(sortParams, isAutoRequest) {
let val = {
descending: [],
ascending: [],
};
for (let key in sortParams) {
let order = sortParams[key];
if (!this.validatenull(order)) {
let name = this.camecaseToLine(key);
val[order].push(name);
}
}
let newValue = {};
if (val.descending.length != 0) {
newValue.descs = val.descending.join(",");
}
if (val.ascending.length != 0) {
newValue.ascs = val.ascending.join(",");
}
this.$emit("sort-change", newValue, isAutoRequest);
},
2.9 监听隐藏以及排序对排序参数的处理
columnInit() {
this.propOption.forEach((column) => {
if (this.defaultBind[column.prop] === true) return;
this.defaultColumn.forEach((ele) => {
// if (["hide", "filters", "order"].includes(ele.prop)) {
// this.$watch(`objectOption.${column.prop}.${ele.prop}`, () =>
// this.refreshTable()
// );
// }
function updateSortParams(column, type) {
//如果地段是默认排序字段，则按原来的字段排序
//1、隐藏了并且没有取消排序
let order = "";
//判断是否取消排序
//if( this.validatenull(this.$refs.table)) return;
let isSort = this.objectOption[column.prop].sortable;
if (type == "hide" && isSort) {
let sortParams = this.getDefaultSort;
let name = sortParams.prop;
if (name == column.prop) {
//设置值
this.sortParams = {
[name]: sortParams.order,
};
order = sortParams.order;
} else {
if (!this.validatenull(this.sortParams[column.prop])) {
delete this.sortParams[column.prop];
}
}
} else {
//处理sortParams中的值
if (!this.validatenull(this.sortParams[column.prop])) {
delete this.sortParams[column.prop];
}
}
this.formateOrderData(this.sortParams, false);
//处理样式
let columns = this.$refs.table.columns.filter((item) => {
return item.property == column.prop;
});
if (columns.length > 0) {
columns[0].multiOrder = order;
columns[0].order = order;
}
}
if (["hide", "filters", "order", "sortable"].includes(ele.prop)) {
this.$watch(
`objectOption.${column.prop}.${ele.prop}`,
(newVal, oldVal) => {
if (ele.prop != "sortable") {
if (ele.prop == "hide") {
if (typeof oldVal == "undefined") return;
updateSortParams.call(this, column, "hide");
}
this.refreshTable();
} else {
if (typeof oldVal == "undefined") return;
updateSortParams.call(this, column, "sortable");
}
}
);
}
});
this.defaultBind[column.prop] = true;
});
},
2.10 处理默认排序的显示按钮问题
3、使用方法
//排序事件
sortChange(val, isAutoRequest) {
sortDefault = val;
if (isAutoRequest) this.onLoad();
},
//请求列表事件
onLoad(params) {
let values = {...params,...this.query,...sortDefault};
console.log("values", values);
}
<avue-crud
:data="list"
:option="option"
:is-multi-order="true"
:header-cell-class-name="headerCellClassName"
@search-change="searchChange"
@sort-change="sortChange"
@sortable-change="sortableChange"
@on-load="onLoad"
></avue-crud>
option: {
name: "sortable",
defaultSort: { prop: "name", order: "descending" },
...
}
十一、上传文件自定义提交请求处理
1、修改源码
//是否自己请求，为false，按原来的方法。true，按业务方法
isSelfHttp: {
type: Boolean,
default: true
},
//主要处理回显数据
if(this.isSelfHttp) {
let freader = new FileReader();
freader.readAsDataURL(uploadfile);
freader.onload =(e)=> {
this.res = {
name:uploadfile.name,
url:e.target.result
}
if (typeof this.uploadAfter === "function")
this.uploadAfter(
uploadfile,
this.show,
() => {
this.loading = false;
},
this.column
);
else this.show(uploadfile);
};
}
2.1、使用方法（dataType:‘array’）
{
label: '数组图片组',
prop: 'img',
dataType: 'array',
type: 'upload',
accept:["image/*"],//接收文件类型
// listType: 'picture-img',//一张图片
// limit:2,//最大允许上传个数
fileSize:100, //1KB k为单位b
propsHttp: {
res: 'data',
},
span: 24,
listType: 'picture-card',//多张图片
tip: '只能上传jpg/png文件，且不超过500kb',
},
uploadDelete(file, column) {
let uid = file.uid;
this.form.file.splice(parseInt(uid),1)
},
uploadAfter(res, done, loading, column) {
done()
this.form.file.push(res);
},
3、注意事项；
3.1、提交的数据格式为formate
3.2、回显数据时，直接赋值img为图片服务器地址；并赋值this.form.file = this.form.img
3.3、如果file中的值为File则为新添加的文件，如果file中的值为字符串，则为回显数据，是否删除文件由后端判断（与后端讨论）
2.2、使用方法（dataType:默认值）
修改源码：
使用方法：
img:[{ "label": "avue@226d5c1a_logo.png", "value": "https://avuejs.com/images/logo-bg.jpg",file:"https://avuejs.com/images/logo-bg.jpg"}],
//取text的值
this.$refs.form.$refs.img[0].text
十二、avue-echart-table 实现当字符串过长时，显示省略号，鼠标悬浮上去，显示完整内容
html代码
<span v-html="citem[item.prop]" @mouseenter="
handleDivMouseEnter($event, item.showOverflowTooltip)
"
@mouseleave="
handleDivMouseleave($event, item.showOverflowTooltip)
"></span>
<el-tooltip
class="item"
effect="dark"
ref="ellipse_tooltip"
:content="tooltipContent"
placement="top-start"
>
</el-tooltip>
methods
handleDivMouseEnter(event, showOverflowTooltip) {
//if (!showOverflowTooltip) return;
const cell = event.target;
if (cell.scrollWidth > cell.clientWidth) {
const tooltip = this.$refs.ellipse_tooltip;
this.tooltipContent = cell.innerText || cell.textContent;
tooltip.referenceElm = cell;
tooltip.doDestroy();
tooltip.setExpectedState(true);
this.activateTooltip(tooltip);
}
},
handleDivMouseleave(event, showOverflowTooltip) {
//if (!showOverflowTooltip) return;
const tooltip = this.$refs.ellipse_tooltip;
if (tooltip) {
tooltip.setExpectedState(false);
tooltip.handleClosePopper();
}
},
十三、内容大屏页实现全屏 基于saber框架
所在页面page/index/index
1、触发网页大屏原来的方法
containerFullScreen() {
this.$refs.top.handleScreen();
},
2、监听大屏状态的变化，添加全屏类
...mapGetters([
"isMenu",
"isLock",
"isCollapse",
"isFullScren", //大屏状态
"website",
"menu",
"refresh",
]),
<div
style="height: 100%; overflow-y: auto; overflow-x: hidden"
id="avue-view"
:class="isFullScren?'fullScren':''"
v-show="!isSearch"
>
3、更改内容页面样式
.fullScren {
position: fixed;
z-index: 9999999;
width: 100%;
top:0;
left:0;
.fullScren-container {
padding:0px !important;
.basic-container {
padding:0px !important;
}
}
}
十四、element UI 表格发生错位
watch: {
currentView(val) {
if (val == "list") {
this.$nextTick(() => {
this.$refs.crud.doLayout();
});
}
},
},
前往低代码交流专区
更多推荐
9
0- 0
已为社区贡献5条内容
所有评论(0)