新项目开始了，用的新的ui框架，虽然框架都是开箱即用，但是还是有一点点区别的，记录一遇到的一些坑，如下：
1.在使用表单组件校验的时候，遇到多选的下拉框，需要校验非空的时候需要额外加一个类
型校验，设置type:'array'即可，因为校验默认类型为字符串，不设置会校验不通过
2.下拉框组件里面如果设置多选，如果存在很多的选择那么可能导致不美观，需自己手动加滚动条设置一个横向滚动，参考如下：
// 让元素水平排列
/deep/.ant-select-selection--multiple .ant-select-selection__rendered {
margin-left: 5px;
margin-bottom: -3px;
height: auto;
max-height: 30px;
max-width: 200px;
overflow: auto;
overflow-y: hidden;
}
/deep/.ant-select-selection--multiple .ant-select-selection__choice {
overflow: initial;
}
// 调整内部样式
/deep/.ant-select ul,
.ant-select ol {
display: flex;
}
/deep/.ant-select-selection--multiple > ul > li,
.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
margin-top: 3px;
height: 22px;
line-height: 22px;
font-size: 14px;
width: auto;
max-height: 200px;
}
/deep/.ant-select-search--inline .ant-select-search__field__wrap {
max-width: 0px !important;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar {
height: 5px;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: lightskyblue;
}
/deep/.ant-select-selection__rendered::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: #ededed;
}
3.时间选择器里面必须加上format,不然是会不生效的，选择的日期也会拿不到值，当使用
能选择时间段的日期选择器的时候，遇上校验，最好还是换成两个单独的日期选择器
4.model组件里面和ele里面的model组件有个区别是没有@open方法，一般可以用wacth监听
model框的visible属性，在里面做清空和数据拿取的操作
5.在你没有使用action属性的时候最好是使用自定义上传customRequest属性，这样子你就
不需要再beforeupload方法里面去加一个return false取消组件的默认的一个上传过程，
关于上传的文件列表的复现，需要每一行数据里面加一个uid，如果没有可以用new Date()
方法弄一个，不然无法复现出来文件列表
6.使用tree组件的replaceFields属性的时候，自定义属性代替原来数据里面的
title,key,children属性，导致使用搜索功能的时候原有的内置插槽会失效，自己决定是
获取tree数据的时候改数据格式还是用这个属性
7.使用select组件和tree-select组件都有模糊搜索的功能，实现办法有两种，第一种就是
直接再input框输入的时候调取接口拿到返回的数据直接赋值，这样子就会导致经常调取接
口，如果数据量很大可能导致页面卡顿，体验感不好，第二种就是直接使用组件里面自带的
属性了，例如select组件里面filterOption属性，如下:
:filter-option="filterOption"
filterOption(input, option) {
return (
option.componentOptions.children[0].text
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
},
tree-select组件里面的filterTreeNode属性，如下
:filterTreeNode="filterTreeNode"
filterTreeNode(input, node) {
return (
node.componentOptions.propsData.title
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
},
其实两者都是拿到输入框的文字去匹配节点上面的数据进行匹配，如果需要依据其他条件去
匹配修改对应的判断条件即可
8.select相关的组件不跟着select框走，加上这行代码即可
:getPopupContainer="
triggerNode => {
return triggerNode.parentNode;
}
"
9.在使用表单组件的时候，如果数据量很大的情况下会导致页面巨卡无比，原因是每次你操
作了里面的一个属性，数据发生了改变，表单组件就会重新绘制一遍，所以你需要加上一个
属性selfUpdate为true即可，这样会让你更改的属性数据不会影响到整个表单去重新绘制
一遍，一般可能导致的是下拉框数据很多很多，建议改成带分页的下拉框，即初始多少条，
下拉到底部继续请求下一页数据这种，另外想要使用表单组件里面的清空方法不要忘记给每
一个表单项加上prop属性，不然方法不生效
10.selct组件总是因为下拉框字面的字很多导致选择之后变长导致变形，这时候需要你给
下拉框一个固定的长度，不能给百分比，即可解决
11.table组件里面想要动态修改表格头部背景颜色等样式，因为可能出现一种情况就是后
台给你一条数据是一个数组，根据数据复用同一个封装好的表格组件，但此时需要依据不同
的属性去展示不同的表头，此时可以弄多个columns配置项，可以依据columns配置项里面
的每一项加上一个className属性，依据不同的状态加载不同的columns配置项即可，这也
是最便捷的，如下：
columns1：[{name:'',dataindex:'',scopedSlots:'',width:'',center:''}],
columns2:[{name:'',dataindex:'',scopedSlots:'',width:'',className:'bgc'}]
<a-table
bordered
:columns="data.releaseStatus == 1 ? columns2 : columns1"
:data-source="[data]"
:rowKey="record => record"
:pagination="false"
></a-table>
然后去style里面加样式即可，/deep/ th.bgc{background:#333....}
12.表单组件 多表单校验
comfirm(){
let result = Promise.all([ this.validateForm("subTaskForm"), this.validateForm("personForm") ]);
result.then(([subTaskForm,personForm]) => {
console.log(subTaskForm,personForm,'subTaskForm,personForm')
})
},
validateForm(form) {
return new Promise(resolve => {
this.$refs[form].validate(valid => {
if (valid) {
resolve(true);
} else {
resolve(false);
}
});
});
},
13.表格加序号单元格
{
title: "序号",
ellipsis: true,
customRender: (text, record, index) => `${index + 1}`,
align: "center"
},
14.表格带复选框实现禁用效果
getCheckboxProps(record){
return {
props:{
disabled: record.status !== '草稿'
}
}
}
需要注意的是给表格rowkey的时候一定要给一个唯一值也就是record.id，不然不生效
15.table组件固定某一列，然后某一列内容过多换行导致表格错位
在项目中需求指定第一列固定住，使用了fiexd并且内容多不用省略号，自动换行，此
时如果第一列得某一行字很多换行了，紧跟着的那一列字数并不多没有换行，这时候就
出现了表格错位，可以每一行设置宽度即可，但是如果项目中自己二次封装了表格组件
采用了异步加载数据的方法，可能会导致该解决办法失效，此时可以自己在自定义的加
载数据方法里面加个定时器手动触发执行一次resize事件即可
window.dispatchEvent(new Event('resize'))
当你设置得rowKey不唯一得时候也会导致该问题！！！
:rowKey="record => +new Date()+record.id"
16.时间范围选择器，设置一个不能选取的时间范围
<a-range-picker
v-if="this.disabledStartTime"
:defaultPickerValue="this.disabledStartTime"
:disabled-date="disabledDate"
v-model="milePostForm.planTime"
valueFormat="YYYY-MM-DD"
placeholder="请选择计划起止时间"
@change="timeChange"
/>
<a-range-picker
v-else
v-model="milePostForm.planTime"
valueFormat="YYYY-MM-DD"
placeholder="请选择计划起止时间"
@change="timeChange"
/>
disabledDate(current){
current = moment(new Date(current), 'YYYY-MM-DD')
if(this.disabledStartTime){
return current >= moment(new Date(this.disabledEndTime), 'YYYY-MM-
DD') ||
current <= moment(new Date(this.disabledStartTime), 'YYYY-MM-
DD').subtract(1,'days')
}else{
return false
}
},
17.带复选框的table表格
:row-selection="
{selectedRowKeys:selectedRowKeys,onChange:onSelectChange}"
分别在data和methods写入对应的值和方法，按照官网里面写入computed里面，例如
computed:{
rowSelection(){
const { selectedRowKeys } = this;
return {
selectedRowKeys,
onChange: this.onSelectChange,
}
}
}
这种写法会出现重新打开无法清除复选框的Bug，分开写则不会
18.table组件带有expandedRowRender属性的时候，会出现一个加号，来控制展开和收缩
功能，此时可能会出现一个需求，就是如果有子项的时候可以出现加号控制展开，如果没有
子项的时候则去掉加号，不展示。此时如何实现这个需求，我们可以配合rowClassName去
自定义一个类名，配合样式实现，例如
:rowClassName="(record) => {return record.isHasChildren?'':'noExpand'}"
/deep/ .noExpand{
.ant-table-row-expand-icon{
display:none;
}
},
