element 常见问题及解决办法

---

一、el-date-picker 限制过去日期无法选择

代码如下（示例）：

<template>
    <div class="box">
		<el-date-picker v-model="time" type="date" placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  :picker-options="pickerOption">
    </div>
</template>


<script>
	export default {
		data(){
			return {
				pickerOption: {
					disabledDate(date) {
							return date.getTime() <= Date.now();
					}
				}
			}
		}
	}
</script>

---

二、el-select 中 multiple多选，回显数据后编辑不起作用

当使用 el-select ，设置 multiple 多选；编辑数据时，在数据回显之后，删除或者添加别的 option，页面没有改变； 但是事实上数据已经更新只是页面没有重新渲染，主要是因为一些嵌套特别深的数据，导致数据虽然更新了，但是页面并没有再次渲染，所以就需要使用 this.$forceUpdate() 迫使 Vue 实例重新渲染；

代码如下（示例）：

<el-select v-model="value" placeholder="请选择" multiple clearable @change="$forceUpdate()">

   <el-option v-for="(item) in Options" :key="item.value" :label="item.label" :value="item.vauue"></el-option>
  
</el-select>

---

三、el-dialog 样式修改

当使用 el-dialog 展示数据时，有时候会遇到滚动条无法到达顶部或者底部，这时候就需要更改 el-dialog 默认样式，自定义滚动条；

修改时我们发现弹窗行间样式可以修改成功不是我们想要的，但是通过定义classname，然后在进行样式的更改不起作用，由于权重的问题，在样式后面添加 !important 无穷权重也是不可以；

解决方法：去掉底部样式中的scoped，然后再进行页面级样式的更改即可，同时定义classname 避免样式被污染

代码如下（示例）：

<template>
       <el-dialog :title="title" :visible.sync="open" append-to-body class="role_dialog">
  
       </el-dialog>
</template>



<style lang="scss">
	.role_dialog {
	    .el-dialog {
	        display: flex;
	        flex-direction: column;
	        max-height: calc(100% - 150px);
	        max-width: calc(100% - 100px);
	    }
	    .el-dialog__body {
	        overflow: auto;
	    }
	}
</style>

---

四、el-select + el-tree

el-select 和 el-tree 实现树形选择器

代码如下（示例）：

<template>
    <div class="select_tree">
        <el-select v-model="value" ref="select" :placeholder="placeholder">
            <el-option :value="value" style="height: 100%;background: #fff;padding: 8px;margin-top: 0px;">
                <el-tree :data="data" ref="tree" :props="defaultProps" default-expand-all :expand-on-click-node='false' @node-click="handleNodeClick" style="font-weight: 500;"></el-tree>
            </el-option>
        </el-select>
    </div>
</template>
 
<script>
export default {
    name: 'select-tree',
    data() {
        return {
            value: '',
            placeholder: '',
            data: [
                {
                    label: '一级 1',
                    children: [
                        {
                            label: '二级 1-1',
                            children: [
                                {
                                    label: '三级 1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '一级 2',
                    children: [
                        {
                            label: '二级 2-1',
                            children: [
                                {
                                    label: '三级 2-1-1',
                                },
                            ],
                        },
                        {
                            label: '二级 2-2',
                            children: [
                                {
                                    label: '三级 2-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },
    methods: {
        handleNodeClick(data) {
            this.value = data.label
            // 隐藏下拉框
            this.$refs.select.blur()
        },
    },
}
</script>

---

五、el-tree 数据过滤

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数

代码如下（示例）：

<template>
   <div class="box">
       <el-input v-model="fullName" placeholder="输入关键字进行过滤" clearable size="small" @input="handleSelect" />
       <div class="tree_container" >
            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :highlight-current="true" :expand-on-click-node='false' :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
            </el-tree>
       </div>
    </div>
</template>

<script>
export default {
    name: 'obox',
    data() {
        return {
            fullName: '',
            data: [
                {
                    label: '一级 1',
                    children: [
                        {
                            label: '二级 1-1',
                            children: [
                                {
                                    label: '三级 1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '一级 2',
                    children: [
                        {
                            label: '二级 2-1',
                            children: [
                                {
                                    label: '三级 2-1-1',
                                },
                            ],
                        },
                        {
                            label: '二级 2-2',
                            children: [
                                {
                                    label: '三级 2-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },

    methods: {
        /**
         * 点击节点
         */
        handleNodeClick(data) {
        
        },
        handleSelect() {
            this.$refs.tree.filter(this.fullName)
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
    },
}
</script>

---

六、el-cascader 实现省市区动态联动

在实际项目中有时需要通过接口依次获取省、市、区的数据，因此我们结合 elementUI 级联组件 el-cascader 实现省市区动态联动；

代码如下（示例）：

<template>
    <div>
	     <el-cascader ref="cascader" v-model="areaNodes" :props="areaProps" @change="handleChange($event)"></el-cascader>
	</div>
</template>

<script>
	export default {
		data(){
			return {
			     areaNodes:[],
			     areaProps: { // 配置节点
	                lazy: true, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
	                lazyLoad: this.lazyLoad, // 加载动态数据的方法，仅在 lazy 为 true 时有效
	                value: 'areaCode', // 指定选项的值为选项对象的某个属性值
	                label: 'areaName', // 指定选项标签为选项对象的某个属性值
	             },			
			}
		},
		methods:{
	        lazyLoad(node, resolve) {  // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
	            if (node.level == 0) {
	                this.selectArea(node, {}).then((res) => resolve(res))
	            } else {
	                this.selectArea(node, node.value).then((res) => resolve(res))
	            }
	        },
	        selectArea(node, parentCode) {
	             // 这里的 selectArea 为后台接口，通过 parentCode 参数查询 省市区
	            return selectArea({ parentCode: parentCode }) 
	                .then((res) => {
	                    if (res.code == 200) {
	                        return res.data.map((value, i) => ({
	                            areaCode: value.areaCode,
	                            areaName: value.areaName,
	                            leaf: node.level >= 2,
	                        }))
	                    }
	                })
	                .catch((err) => {
	                    console.log(err)
	                })
	        },
	        // 获取选中的节点
	        handleChange(event) {
	            let checkNode = this.$refs.cascader.getCheckedNodes()[0]
	        },
        }
	}
</script>

---

七、element 解决 el-table 表格错位问题

但是用嵌套 dialog 的时候，来回切换时表格会发成错乱，找了很多解决办法都没有解决，最后发现其实官网有个doLayout方法可以对table进行重新布局

代码如下（示例）：

this.$nextTick(() => {
     this.$refs.table.doLayout(); //解决表格错位
});

---

八、element 源码更改

实际工作中，我们可能会更改某些功能或者样式之类，但是官方又没有提供相对应的功能属性，所以我们就需要更改源码；

1. 首先 vue 项目引用的并不是源码，而是打包好的lib文件，直接去修改项目里的lib文件是不会生效的
2. 我们需要从 git 上拉取 element 的源码
3. 安装依赖 npm install
4. 启动项目：npm run dev，可访问 http://localhost:8085
5. 编译，生成项目所需依赖文件lib：修改packages中的源码，然后进行打包 npm run dist
6. 将打包后的 dist 文件目录，替换自己项目中 node_modules 包下的element-ui 文件夹里的lib包，即可生效

Element git ：https://github.com/ElemeFE/element

---

九、补充

datePicker： 隐藏选项和失去焦点 => this.$refs.datePicker.hidePicker()
select 隐藏下拉框并失去焦点 => this.$refs.select.blur()
form 验证任一表单项 => this.$refs.form.validateField('param')
upload 清空上传的文件列表 => this.$refs.upload.uploadFiles = []
DateTimePicker 时间差八个小时解决方法(将时间字符串转换成时间戳，加8个小时，再转换成时间字符串) => new Date(Date.parse(new Date(row.date))+8*3600*1000)

table 合并单元格：
用rowIndex, columnIndex 找到要合并的开始单元格
return {rowspan: 1,colspan: 1 } 表示表格不变
return {rowspan: 2,colspan: 1 } 表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2 } 表示表格向右合并一个单元格
return {rowspan: 0,colspan: 0 } 表示删除此单元格

记录

@media only screen and (max-width: 1920px) {
    .box {
        width: 12% !important;
    }
}

@media only screen and (min-width: 1440px) and (max-width: 1680px) {
    .box {
        width: 14% !important;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1440px) {
    .box {
        width: 13% !important;
    }
}

.cust::-webkit-scrollbar{
  width: 4px'
}

.cust::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0,2);
  background: rgba(0,0,0,0,2)
}

.cust::-webkit-scrollbar-track{
  border-radius: 0;
  box-shadow: inset 0 0 5px rgba(0,0,0,0,2);
  background: rgba(0,0,0,0,1)
}