一、Ant Design Vue 2.2.4
1. Tree 树形组件
（1）默认展开节点
① defaultExpandAll属性默认展开所有节点，但该属性只在 第一次渲染时生效。
② 如果树形组件绑定的数据treeData，是通过 接口异步获取到的，则应当在数据获取到之后再渲染树结构。
<a-tree
v-if="treeData.length" // 只有绑定的数据有值了才渲染树
checkable
defaultExpandAll
:tree-data="treeData"
:replace-fields="replaceFields"
v-model:checkedKeys="addRoleForm.permissions"
/>
2.Table 表格
（1）所有数据一行展示
① 给每一列数据一个 最小宽度 保证表头不会折叠。
② 最后一列可以 固定到右侧。
[
{
title: '操作',
dataIndex: 'action',
key: 'action',
slots: { customRender: 'action' },
// 设置最小宽度
customCell: () => {
return {
style: {
'min-width': '230px',
},
};
},
fixed: 'right', // 固定到右侧
},
];
③ 给表格设置 scroll="{x:true}"，并用样式限制每行数据 不准换行。
<a-table
:row-key="(record) => record.id"
:dataSource="dataSource"
:columns="columns"
:scroll="{ x: true }"
/>
④ 注意：此时的table表格如果处于flex布局中，其宽度 不能设置为 flex:1，否则表格会溢出。
⑤ 可以将宽度设置为 固定值，或者是 width: calc(100% - 100px)，这里注意减号 前后的空格。
⑥ height:calc(100vh - 192px)
（2）表格排序
① columns配置项中，要有 sorter、sortOrder属性；由于sortOrder要动态变化，所以columns配置项要写在 computed计算属性中。
const columns = computed(() => {
return columnMethod(table.sortOrder, table.sortColumn);
});
② 表格监听分页与排序的事件。排序改变时，根据最新的 sortColumn属性，更新 columns配置项 中的sortOrder属性，页面的箭头效果就有了。
const mySurveyColumns = (
sortOrder: undefined | string,
sortColumn: undefined | string,
) => {
return [
{
title: '优先级',
dataIndex: 'priority',
key: 'priority',
sorter: true,
sortOrder: sortColumn === 'priority' ? sortOrder : false,
},
]
③ 同时更新 接口请求参数 中的sortOrder和sortColumn参数，重新发送请求。
（3）element-UI 中的表格排序
columns配置项中只有sortable属性，设置为'customer'即可。排序事件触发时，不需要再手动更改属性值。
3.rowSelection属性
（1）rowSelection属性值不会动态改变，虽然绑定的值变了，但是不会作用到表格上。
（2）必须重新给 表格赋值。
二、Echarts
1.echarts图分装成组件时的注意事项
（1）dom已加载错误；
（2）获取echarts实例时，echarts所在子组件还未渲染；
// 初始化echarts图表
const echartsInit = () => {
// 用echarts官方提供的getInstanceByDom获取组件实例，存放echarts的dom名称根据来自父组件
let myChart = echarts.getInstanceByDom(document.querySelector('.' + props.el));
if (myChart != null && myChart != '' && myChart != undefined) {
myChart.dispose(); //解决echarts dom已经加载的报错
}
myChart = echarts.init(document.querySelector('.' + props.el));
let option = {};
myChart.setOption(option);
};
2.大小自适应
（1）将cavans标签和最近的父元素，宽高设置为100%。
（2）onMounted时渲染图表，可能会出现宽度虽然是自己设置的100%，但内容确在横向上错位了。这是由于渲染的先后顺序导致的。可以 200毫秒后再进行图表的生成和渲染。
（3）屏幕缩放时，图表比例失调，可以监听屏幕变化，重新 myChart.setOption(option);
3.在toolTip弹框中获取更多信息
series的值可以是一个数组对象，value属性 代表的是y轴的值。
series:[1,2,3,4,5] // 常见的数组形式
// 对象数组形式
series:[
{value:1,age:'25岁',name:'王祖贤'},
{value:2,age:'30岁',name:'马冬梅'}
]
######4.渐变色、横轴文案竖着排、缩放功能
4.toolTip弹框引起的滚动条闪动
首次渲染时，如果存放echarts图的外层元素有滚动条，可能导致滚动条变得很长；但鼠标经过图表后，滚动条又变正常了；这是由于toolTip弹框导致的。
① 在toolTip配置项中添加confine属性。
tooltip: {
confine: true
}
② 存放图表的外层元素，添加 overflow:hidden 属性。
三、Element-Plus
1.table表格修改了横向滚动条样式后，导致固定列下方与滚动条之间产生缝隙。
.el-table__fixed, .el-table__fixed-right {
height: calc(100% - 12px)!important; // 12px就是横向滚动条的高度。
}
四、vite 打包配置
1.静态资源-图片
用v-html生成的<img />标签，在 生产环境 无法解析 assets目录 下的图片路径，可以将图片放到 public目录 下。
更多细节参考vite官方：https://vitejs.bootcss.com/guide/assets.html#importing-asset-as-url
// 将字符串中的空格替换成一张图片
original: item.original?.replace(/\s/gi,'<img src="/空格.png" alt="" class="kg" />')
// 在模板中使用v-html解析图片
<span v-html="record.original"></span>
五、表单校验ElementUI
1、表单校验的先决条件
（1）<el-form /> 标签用v-bind:model绑定数据对象。:rules绑定校验规则对象。
注意： model是表单的属性，用v-bind绑定。这跟 v-model不是一回事！！！！！！！！！
<el-form
:model="loginForm"
:rules="loginRules"
/>
data () {
return {
// 表单绑定的数据对象
loginForm: {
// 校验的字段
mobile: '',
password: ''
},
// 表单绑定的校验规则对象
loginRules: {
mobile: [],
password:[]
}
},
（2） <el-form-item />标签设置 prop属性。值为 数据对象中的校验字段。
<el-form-item prop="mobile" > </el-form-item>
（3）<el-input />标签用v-model 绑定数据对象中相对应的数据。
<el-input v-model="loginForm.mobile"> </el-input>
2、表单校验规则
| 规则 | 说明 |
|---|---|
| required | 如果为true，表示该字段为必填 |
| message | 当不满足设置的规则时的提示信息 |
| pattern | 正则表达式，通过正则验证值 |
| min | 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 |
| max | 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 |
| trigger | 校验的触发方式，change（值改变） / blur （失去焦点）两种 |
| validator | 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验 |
格式：
loginRules:{
校验字段：[ { }，{ }，{ } ]
}
loginRules: {
mobile: [{
required: true, message: '手机号不能为空', trigger: 'blur'
},
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
}
3、自定义校验规则
（1） validator是一个函数，可以定义在 data 中。
data () {
// 自定义校验规则
const checkMobile = function (rulue, value, callback) {
value.charAt(2) === '0' ? callback() : callback(new Error('错误'))
}
return {}
}
第一个参数代表当前的校验规则。
第二个参数代表当前被校验的数据。
第三个参数是一个回调函数。注意：无论是否通过校验，都要调用callback()函数。
（2） 自定义校验规则的函数定义好之后，要在规则对象中引用。
loginRules: {
mobile: [{ validator: checkMobile, message: '手机号第三位必须是0', trigger: 'blur' }]
}
4、手动校验
（1）什么是手动校验
① 以上校验只能在表单失去焦点或者内容变化时触发。
② 现在希望点击登录按钮时对所有表单项进行校验。或者对部分表单进行校验。
（2）如何实现手动校验
element-ui提供了表单校验的API，我们需要通过 this.$refs 拿到表单的 DOM对象，来调用API函数。
① 给<el-form> 标签设置 ref 属性。。
② 给提交按钮绑定点击事件。
③ 在事件函数中，给表单对象绑定 validate()函数，进行校验。
methods: {
// 手动校验
submitForm () {
this.$refs.loginFormRef.validate()
.then(() => console.log('校验成功'))
.catch((error) => console.log('校验失败'))
}
}
（3） element-ui 提供的表单校验API
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string) |
① validate可以传入一个函数作为参数，判断是否校验成功；也可以使用promise的.then().catch()方法。
② 上面使用的是promise方法。下面是传入回调函数的方法。
this.$refs.loginFormRef.validate(（boolean，object）=>{} )
形参boolean的值可以判断校验是否成功；形参object时未通过校验的字段。
5、vue 结合 jsx 的动态表单校验
（1）动态生成的表单的 校验规则 rules属性，要单独写到<el-form-item>标签上。
（2）重点是 prop属性，有特殊写法。
① 其中，state.followForm 是<el-form>绑定的表单对象。
② state.followForm.url是一个数组，用来存放动态生成的链接地址，数组元素就是 字符串。
③ prop属性直接用 数组名 url（字符串） 加上 .index（动态索引）。
const state = reactive({
followForm: {
url: ['', ''], // 存放链接的数组，初始默认有两个输入框
},
})
<el-form model={state.followForm}>
{
state.followForm.url.map((item, index) => (
<el-form-item
label="数据链接："
prop={`url.${index}`} // 1.注意prop属性的写法。
rules={{ required: true, message: '请输入数据链接并以http开头', trigger: 'blur' }} // 2.校验规则单独写。
>
<el-input
v-model={state.followForm.url[index]} // 3.注意input框数据的绑定。
onBlur={() => limitUrl(index)}
/>
</el-form-item>
))
}
</el-form>
