avue源码修改过程(持续更新)

在avue基础上修改的源码，点击进入git地址

一、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为单位bpropsHttp: {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

input accept值

十二、avue-echart-table 实现当字符串过长时，显示省略号，鼠标悬浮上去，显示完整内容

html代码

  <span v-html="citem[item.prop]"   @mouseenter="handleDivMouseEnter($event, item.showOverflowTooltip)"@mouseleave="handleDivMouseleave($event, item.showOverflowTooltip)"></span><el-tooltipclass="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",]),

 <divstyle="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();});}},},