element汇总

# element 使用技巧

# element 样式重写

组件内样式重写：/deep/

.dialog-box /deep/ {
  .el-dialog__body {
    padding: 10px 20px;
  }
}

1
2
3
4
5

# element 事件回调传额外参数

用回调函数传递额外参数

<el-upload
:on-success="(response, file, fileList)=>handleUpSuccess(response, file, fileList,otherParams)"
</el-upload>

1
2
3

# el-table 组件

# 1. 修改 el-table 背景色和行样式

修改 el-table header 的背景色

<el-table :header-cell-style="tableHeaderColor">

tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 0) {
    return 'background-color:#E5E5E5; box-shadow:1px 1px 3px #333; border-bottom:1px solid #CDCDCD;'
  }
},

1
2
3
4
5

修改 el-table 行样式（行的 style 的回调方法）

<el-table :row-style="rowStyle">

rowStyle({ row, rowIndex }) {
  if (rowIndex === 0) {
    return 'height:120px'
  } else {
    return 'height:120px'
  }
}

1
2
3
4
5
6
7

# 2. el-table 列顺序问题

el-table-column 使用 v-if 导致列位置与数据错乱

解决办法：给每一个 el-table-column 加一个 key

例如：<el-table-column v-if="type === 3" key="1"/>

# 3. el-table 树形结构

<el-table
  ref="treeTable"
  v-loading="tableLoading"
  :data="tableData"
  row-key="id"
  lazy
  :load="loadChildrenData"
  :tree-props="{children: 'subTag', hasChildren: 'hasChildren'}"
></el-table>

1
2
3
4
5
6
7
8
9

// data
maps: new Map(),
// method
loadChildrenData(tree, treeNode, resolve) {
  this.maps.set(tree.id, { tree, treeNode, resolve });
  this.tableLoading = true;
  getChildLabel(tree.id).then((resData) => {
    this.tableLoading = false;
    resolve(resData);
  }).catch(() => {
    this.tableLoading = false;
  });
},
// 重新触发树形表格的loadTree函数(因项目中需要多次触发loadTree方法，故封装成一个方法)
refreshLoadTree(parentId) {
  // 根据父级id取出对应节点数据
  const { tree, treeNode, resolve } = this.maps.get(parentId);
  this.$set(this.$refs.treeTable.store.states.lazyTreeNodeMap, parentId, []);
  if (tree) {
    this.loadChildrenData(tree, treeNode, resolve);
  }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# el-form 表单

# 1. el-form 表单重置

代码： this.$refs['appGuardSetForm'].resetFields(); 注意点：当 formData:{ id:null} id 初始化有值，但是表单上没有 id 回显框 input，后台返回的 id 有值，resetFields 不能把 id 置为 null，需要手动重置 formData.id

el-dialog 中 el-form 表单重置验证

当在 element 弹窗中使用 element 表单验证时，且表单在弹窗中表单重置验证使用 v-if="dialogFormVisible"

<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
  <el-form v-if="dialogFormVisible"></el-form>
</el-dialog>

1
2
3

# 2. el-form 无 change 事件的 el-form-item 验证

隐藏的 el-input 用于无 change 事件的 el-form 验证

<el-input type="hidden" v-model="advertisementForm.picUrl"></el-input>

# 3. el-form 出现问题

输入框输入不了或者报错 [Element Warn][Form]model is required for validate to work!

解决办法： ref 重复，检查是否在其他 el-form 中使用了相同的 ref 名，多个 el-form 组件 ref 命名要独立

# 4. el-form 表单 disabled 禁用编辑，但是表单的某些项不需要禁用

使用子 el-form 包裹该不需要禁用的子项，并且子 el-from 样式设置为display: inline;

<el-form label-width="0" size="mini" :model="form" class="return-btn-form">
  <el-button
    @click="goback"
    class="return-btn return-img-txt-btn main-btn-white right mright"
  >
    返回
    <i class="el-icon-arrow-right"></i>
  </el-button>
</el-form>

1
2
3
4
5
6
7
8
9

# 5.el-date-picker 加上时间范围限制

<el-form-item label="时间">
  <el-date-picker
    v-model="form.times"
    class="w100"
    :picker-options="pickerOptions"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    @blur="changeBlurPickerOptions"
  />
</el-form-item>

1
2
3
4
5
6
7
8
9
10
11
12
13

// data
pickerMinDate: '',
pickerOptions: {
  // 点击时，选择的是开始时间，也就是minDate
  onPick: (obj) => {
    console.log('my console obj : ', obj.minDate);
    this.pickerMinDate = new Date(obj.minDate).getTime();
  },
  // 限制开始时间和结束时间范围为180天
  disabledDate: (time) => {
    if (this.pickerMinDate) {
      const day1 = 180 * 24 * 3600 * 1000;
      const maxTime = this.pickerMinDate + day1;
      const minTime = this.pickerMinDate - day1;
      return time.getTime() > maxTime || time.getTime() < minTime;
    }
    return false; // pickerMinDate为空时，不禁用
  },
},

// method
// 时间选择器失去焦点事件，清空选择器限制
changeBlurPickerOptions() {
  console.log('my console blur : ');
  this.pickerMinDate = '';
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# el-input 组件

# 1. el-input 输入不了内容

el-input 输入不了内容（没有 disabled）:

el-row 必须并排

# el-dialog 组件

# element 官方 bug

# 1.table 树形子节点懒加载中 hasChildren 问题

https://github.com/ElemeFE/element/issues/15833 (opens new window)

更新时间: 9/8/2021, 4:24:27 PM

← vue问题汇总 vant汇总→