背景
使用 vue3 + elementPlus 做了一个树形表格，数据是懒加载的，发现删除子节点，页面不刷新。即使重新获取表格数据，一层一层展开，子节点还是存在，怀疑是缓存的问题。
网上查询后，发现有一个属性，可以获取树形表格缓存的数据，打印看一下。
...大约 1 分钟
背景
使用 el-table 组件，并且在列中使用了v-if指令，容易导致列的次序错乱。
解决的方法也很简单，只需要为每个el-table-column添加一个key属性即可。
<el-table stripe v-loading="loading" style="width: 100%;" :data="tableData" :height="height">
<el-table-column type="index" fixed width="70" align="center" label="序号" :key="1" />
<el-table-column
v-if="USER_LV === 0"
prop="subCompanyName"
align="center"
label="公司名称"
width="150"
key="2"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
v-if="USER_LV !== 2"
prop="projectName"
align="center"
label="项目名称"
key="3"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>...小于 1 分钟
背景
给一个 Vue2 项目开发新功能，在一个 el-dialog 中使用了 el-tabs 组件做了一个详情页，在第一个页面使用时候正常。在第二个页面使用的时候，浏览器卡死了，无法操作，强制刷新都不行。
首先排查了下自己代码中的逻辑问题，然后在网上找了下：
网上查到的方法，自己尝试后没用，但是可以参考下
- 切换 element-ui 的版本，我用的 2.15.6，换成 2.6.1，问题依旧;
- el-tabs 外面加 el-col，问题依旧;
- 给 el-tabs 添加一个 v-if 判断条件，定时器延时修改条件，问题依旧;
...小于 1 分钟
正常情况下
在 ElementUI 中，表单验证使用 async-validator（异步校验）实现，正常的使用方法如下：
- el-form 标记对的 rules 属性在数据区绑定为一个对象型数据。
- rules 对象的键名必须与表单元素利用 v-model 绑定的变量名一致。
- rules 对象的键名取值为一个数组，数组元素是表单元素的多个验证规则。
- 也可以直接在 el-form-item 上对表单中的单个元素做验证，多用于动态判断是否给该 item 设置验证条件的情景。
- el-form-item 标记对使用 prop 属性来为表单元素设置需要满足的验证规则。
...大约 2 分钟
背景
el-table 中，对于表格单元格的合并，文档中有介绍。原理就是通过设置span-method方法，返回一个二维数组，数组中的每一项表示一行中每个单元格的合并情况。
但是这种方法针对已知表格中的某些单元格需要合并的情况，如果需要合并的单元格位置是动态的，那么这种方法就需要改造下了。
1、合并静态单元格（已知某几行、或某几列需要合并）
<template>
<div>
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="amount1" label="Amount 1" />
<el-table-column prop="amount2" label="Amount 2" />
<el-table-column prop="amount3" label="Amount 3" />
</el-table>
</div>
</template>
<script setup>
//重点就是这个方法，返回一个数组，用来描述每行每个单元格的合并情况
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
const tableData = [
{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15
}
]
</script>...大约 3 分钟