1. 表格

场景：合并表头时获取不到dom元素

解决办法：用 this.$nextTick

 <el-table  :data="tableData" style="width: 100%;" :header-cellstyle="mergeCells" >
 ...此处省略表格内容
</el-table>

//合并表格函数
    mergeCells({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 1 && columnIndex != 13 && columnIndex != 14) {
                return { display: "none" }
            }
            if (rowIndex === 0 && columnIndex < 13) {
            
            //用$nextTick后可以获取到表头dom
                this.$nextTick(() => {
                    if (document.getElementsByClassName(column.id).length !== 0) {
                        document.getElementsByClassName(column.id)[0].setAttribute("rowSpan", 2)
                    }
                    return column
                })
            }  
        },

2. 表单

场景：表单里只有一个输入框时，按回车页面刷新

解决办法：
方法1：去掉表单
方法2：form表单中大于多于两个文本框（只有一个文本框的话，复制一个，display设置为none）
方法3：el-form中加一个：@submit.native.prevent，原因是触发了表单默认的提交行为

3. element标签

场景：使用el-row时，发现直接用@click="fn"无法触发点击事件

解决办法：
el-row,el-col上的点击事件加 .native

<el-row class="register"  @click.native="fn()"> 点击</el-row>

4.el-tree 展开/收起所有节点

实现办法：

 <el-tree :data="treeList"  show-checkbox node-key="id" :default-expand-all='isExpandAll' ref="dataTreeList" :default-checked-keys="id">
</el-tree>
<el-button @click="toggleRowExpansion" size="mini">展开/折叠</el-button>

    data() {
        return {
            isExpandAll: false,//是否全部展开
            treeList: [{
                label: '一级 1',
                id: 'a',
                children: [{
                    label: '二级 1-1',
                    id: 'b',
                    children: [{
                        label: '三级 1-1-1',
                        id: 'c'
                    }]
                }]
            }]
        }
    },
            
    //切换树状图展开折叠方法
    methods: {
        toggleRowExpansion() {
            this.isExpandAll = !this.isExpandAll
            this.toggleRowExpansion_forAll(this.treeList, this.isExpandAll);
        },
        toggleRowExpansion_forAll(data, isExpansion) {
            data.forEach(item => {
                this.$refs.dataTreeList.store.nodesMap[item.id].expanded = isExpansion
                if (item.children != undefined && item.children != null) {
                    this.toggleRowExpansion_forAll(item.children, isExpansion);
                }
            })
        }
    }

4.树形数据表格的展开/收起所有节点

效果

实现方法

<el-button @click="toggleRowExpansion" size="medium">全部展开/折叠</el-button>
<el-table  :data="treeList" style="width: 100%" row-key="id"  :default-expand-all='isExpandAll' ref="dataTreeList" >

    data() {
        return {
            isExpandAll: false,//是否全部展开
            treeList: [{
                label: '一级 1',
                id: 'a',
                children: [{
                    label: '二级 1-1',
                    id: 'b',
                    children: [{
                        label: '三级 1-1-1',
                        id: 'c'
                    }]
                }]
            }]
        }
    },
            
     //切换数据表格树形展开折叠
    methods: {
        toggleRowExpansion() {
            this.isExpandAll = !this.isExpandAll
            this.toggleRowExpansion_forAll(this.treeList, this.isExpandAll);
        },
        toggleRowExpansion_forAll(data, isExpansion) {
            data.forEach(item => {
                this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
                if (item.children != undefined && item.children != null) {
                    this.toggleRowExpansion_forAll(item.children, isExpansion);
                }
            })
        },
    }