const 声明的常量不可以改变:
比如 const a = 1,const b =3,这些就不可以改变,
但是如果const 声明的是对象或者函数,那么,这些是可以改变的
比如:弹窗的打开是通过visible 的true 和false 来控制的,那么声明的对象可以是:
const showVisible = ref(false); 然后在watch 上面监听 传递过来的 visible,
另外的经验: 比如时间选择器上
<!-- 这里的时间选择的值不做过滤:value-format="YYYY-MM-DD",传递给后端的值的格式为 2022-05-13T16:00:00.000Z -->
<el-date-picker
v-if="column.type === 'daterange'"
v-model="currentParams[column.prop]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime"
format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
>
</el-date-picker>
这个时间选择器上有开始时间和结束时间两个内容,但是如果业务要求开始时间和结束时间是各自一个参数,那么,你可以在查询的时候赋值,在查询的参数上多加一个例如,prop 的是createTime,这个不是默认参数,使自己加的,多一个参数对后端影响不大,
然后查询的时候判断,createTime 是否为空,是则不处理,有值,那就把开始时间和结束时间赋值:
const onSearch = () => {
if (searchParams.value.createTime !== null) {
searchParams.value.relationStartTime = searchParams.value.createTime['0'];
searchParams.value.relationEndTime = searchParams.value.createTime['1'];
}
};
把createTime的第0 个值赋值给开始时间,把createTime的第1 个值赋值给结束时间,
另外还有一个不用赋值的操作,那就是直接的prop,时间选择器直接传两个参数,但是要看业务场景,有时候产品经理设计上觉得不好看,那你就得换掉;
模糊查询:模糊查询的重要部分就是一个查询参数的map ,同时也是自己对组件的理解:
查询方法:
remoteMe = async (val?: any) => {
const { data } = await searchName({ tenantName: '' });
searchColumns.value.map((item) => {
if (item.prop === 'tenantIds') {
item.dictData = data.tenantList;
return item;
}
return item;
});
};
下拉选择居中样式设置
<!-- 给下拉选项设置居中 -->
<el-select v-if="column.type === 'select'" @change="onSearched" v-model="currentParams[column.prop]" v-bind="column.formAttrs" clearable class="w-full" :teleported="false" popper-class="select-popper">
<el-option
v-for="dictOpt in getOptionData(column)"
:key="dictOpt[column.dictValueName ? column.dictValueName : 'value']"
:value="dictOpt[column.dictValueName ? column.dictValueName : 'value']"
:label="dictOpt[column.dictLabelName ? column.dictLabelName : 'label']"
v-bind="column.formAttrs"
></el-option>
</el-select>
:deep(.select-popper) {
.el-select-dropdown__item {
text-align: center;
}
}
其中,:teleported="false" popper-class="select-popper" 这里的代码才是重点改变选项样式的,teleported:是否将下拉列表插入至 body 元素,在弹出框的定位出现问题时,可将该属性设置为 false,之前用的是popper-append-to-body,但是2.1.0版本后弃用,可以用但是会警告也会生效,popper-class:Select 下拉框的自定义类名
样式穿透的时候注意权重的问题,比如elementUI 的上下级关系,想要穿透权重就要加!important