avue组件使用总结一

1. el-dialog内嵌avue-crud组件时，后续打开弹窗页面不刷新问题

场景：avue-crud每次加载都会自动去请求接口。但是放在el-dialog中，通过设置dialog的visible属性来控制显示和隐藏。除第一次后，都不会去触发接口。

解决方法：使用在el-dialog上使用v-if来强制每次显示时重新加载组件以达到数据刷新

代码：

<el-dialog

:title="titles"

:visible.sync="dialogVisible"

width="85%"

v-if="dialogVisible"

:before-close="handleClose"

>

2. avue-crud中el-select组件无法设置局部样式

原因：由于el-dialog的modal-append-to-body遮罩层是否插入至 body 元素上是默认为true的，所以el-select-dropdown是在body元素上，在组件内设置el-select的样式会不生效

代码：

<div class="searchTable drop-class"> //在整个组件上添加drop-class类

<el-dialog

:title="titles"

:visible.sync="dialogVisible"

width="85%"

v-if="dialogVisible"

:before-close="handleClose"

>

// 页面显示的时候，给整个body对象增加body-drop-class这个类样式（因为弹窗是遮罩层属性，所以在弹窗显示的时候无法再操作非此组件的下拉框，也就无法被设置的全局样式所影响）

InitData(data) {

if(document.querySelector('.drop-class')){

document.querySelector('body').classList.add('body-drop-class')

}

}

// 关闭的时候移除这个样式，避免污染其他下拉框的样式

handleClose() {

this.dialogVisible = false;

document.querySelector('body').classList.remove('body-drop-class')

}

//下拉框和日期下拉框的样式如下

.body-drop-class .el-select-dropdown__item.hover,

.body-drop-class .el-select-dropdown__item:hover {

background: #304ae7 !important;

color: #fff !important;

}

.body-drop-class .el-select-dropdown__item,

.body-drop-class .el-select-dropdown__item.selected {

background: #2c4093 !important;

color: #909ac8 !important;

}

.body-drop-class .el-select-dropdown__list {

padding: 0;

}.body-drop-class .el-picker-panel{

background: #2c4093;

color: #bdbdbd;

border:none;

}

.body-drop-class .el-date-table th {

color: #b4b6bb;

border-bottom: 1px solid #77839f;

}

.body-drop-class .el-date-table td.in-range div, .el-date-table td.in-range div:hover {

background-color: #2c4093;

}

.body-drop-class .el-date-range-picker__content.is-left {

border-right: 1px solid #7582bb;

}

3. crud组件表单字段顺序和表格展示字段顺序不一致问题

场景：表单的字段搜索顺序和表格字段展示顺序不一致

解决方法：由于表单和表格的字段都是在option中配置的，并且按照顺序加载。因此可以专门设置新的字段用于顺序展示，注意prop的值不能重复否则会展示不出来

代码：

{

label: "产品",

prop: "pname_str",//用于表格展示字段

search: false,

formatter: (val) => { //通过formatter属性来设置对应的返回值

if (val.pname) {

return val.pname;

}

},

},

{

label: "名称",

prop: "ename",

search: false,

},

{

label: "地市",

type: "select",

prop: "city",

search: true,

},

{

label: "区县",

type: "select",

prop: "country",

search: true,

},

{

label: "产品",

type: "select",

dicUrl: "/api/queryTypesRes",

dicFormatter: (data) => {

return this.changeToDict(data.data.qysyyy);

},

hide: true, // 此字段在表格中不展示

prop: "pname", //用于搜索的字段

search: true,

filterable: true,

searchSpan: 5,

searchLabelWidth: 90,

},

4. crud组件下拉选项赋值

<avue-crud

:option="option"

:table-loading="loading"

:data="tableData"

:page.sync="page"

:search.sync="search"

ref="crud"

v-model="form"

@search-change="searchChange"

@search-reset="searchReset"

@current-change="currentChange"

@size-change="sizeChange"

@refresh-change="refreshChange"

@on-load="onLoad"

>

search:{}, //设置表单赋值字段

// 请求数据后，赋值

InitData(data) {

this.search.city = data.city

}

5. crud组件下拉选项框二级联动

场景一：地市-区县二级联动

{

label: "地市",

type: "select",

prop: "city",

search: true,

filterable: true,

dicUrl: "/api/cityRes",

cascader: ["country"], //设置二级的联动字段

dicFormatter: (data) => { //将后台的接口数据转换成字典表格式

return this.changeToDict(data.data.city);

},

},

{

label: "区县",

type: "select",

prop: "country",

search: true,

filterable: true,

dicUrl: `/api/countryRes?city={{city}}`,//{{city}}是一级联动的字段

dicFormatter: (data) => {

return this.changeToDict(data.data.country);

},

},

...

// 将数组转换成字典表格式

changeToDict(arr) {

let objArr = [];

arr.map((item) => {

let obj = {

value: item,

label: item,

};

objArr.push(obj);

});

return objArr;

},

场景二：隐藏地市（地市固定），只展示区县（一般用于某地市的二级下钻）

// 点击事件时,如果不是二级，则隐藏地市字段。此时需要设置表单的一级默认值，才会去触发二级的字典查询

this.search.city = data.city

if (currentMap !== "江西省") {

column.map((item) => {

if (item.label == "地市") {

item.hide = true;

}

});

} else {

column.map((item) => {

if (item.label == "地市") {

item.hide = false;

}

});

}