element-ui 实记问题记录

主要是记录一些在使用Element-ui 组件时,耗费时间去解决的一些问题。

1. 表格渲染出现列项数据重叠,错位的现象

请添加图片描述

偶尔出现,没有报错,搞了好久,然后问了朋友说你设置一下row-key


确实是解决了,没有再出现,但是有的表格我也没设置也没出现过。不知道是什么诱发导致的。

2. 实现el-select 的数据懒加载

通常会遇到某些下拉数据时某个模块的列表数据,会有很大的数据量,则需要实现分页懒加载选项数据。

之前也有写过 , 对于更详细的说明,请移步这里 vue 实现 el-select 下拉选项的懒加载

实现了自定义指令lazy-load , 这边给一个参考示例,用于某个模块数据的下拉选项数据懒加载



在处理分页数据的时候,主要考虑了几个点:

  1. 初始加载后,后续触发的加载逻辑则需要合并之前的数据initLoad标识
  2. 不是第一次加载,则需要判定,触发滚动加载是不是已经加载完了pageNo * pageSize >= this.pageOptions.total;所以在滚动加载时,需要手动传递当前页码参数
  3. 另一个就是我们开启了搜索,则在搜索的时候,需要重新从第一页加载 this.pageOptions.pageNo = 1 获取的数据不做合并

3. 自定义el-form表单校验

这个之前也写过一篇文章 v-model自定义组件结合el-form做表单校验

使用【2】的实例,可以作为el-form的自定义组件。要需要配合做校验

// 事件emit
import emitter from 'element-ui/src/mixins/emitter'
export default {
    data () {},
    model: {
      prop: 'value',
      event: 'change'
    },
    mixins: [emitter],
    props: {
      value: {
        type: [String, Array],
        default: ''
      }
    },
    watch: {
      value (val) {
        // 转发当前组件值的数据传递给 el-form-item 
        // 当然你的 el-form-item 的prop设置正确
        this.dispatch('ElFormItem', 'el.form.change', [val])
      }
    },
}

4. el-table初始化渲染,同时默认选中行时,不生效

async queryTableFields () {
    const query = {
      tableId: this.tableId,
      roleCode: this.roleCode
    }
    const data = await queryDataTableFields(query)
    if (data && Array.isArray(data)) {
      this.tableOption.data = [].concat(data)
      // 默认选中项
      let checked = data.filter(item => item.right === 1)
      
      // 同步设置表格选中数据,不生效
      // this.$refs.table.toggleRowSelection(checkedData, true)
      
      // 此处需要延时处理默认的选中
      // 或者使用setTimout 也行
      this.$nextTick(() => {
        this.$refs.table.toggleRowSelection(checkedData, true)
      })
    }
},

起因就是已经拿到了当前列表选择的数据,然后在获取到列表数据后就行默认选中。

5. el-table 实现合并列、行

这个之前没做过,以为也就看个文档,几下就做出来了,高估了自己,花了三个小时才整明白。

列、行合并主要是通过span-method 方法来处理某一行、某一列的展示与否(仔细品这句话)


先看一下该方法的传参

const tableSpanMethod = ({row, column, rowIndex, columnIndex}) => {
    // 给了行下标、列下标
    // 是不是就确定了当前cell单元格的位置
    // 通过返回值控制是不是要渲染这个单元格 [1,1] 渲染行、列,[0,1] 只渲染列,[0,0] 行列不渲染
}

知道主要的参数含义,来实际处理一下。注意参数是对象,解析的定义;

请添加图片描述

如上图,我们要合并第一、二行的第一列。可以简单的写一下如下代码

tableSpanMethod ({row, column, rowIndex, columnIndex}) {
      // 首先是第一行、第一列需要渲染,而且要合并两行
      if (rowIndex === 0 && columnIndex === 0) {
        return [2, 1]
      }
      // 第一行第一列已经合并,所以不需要在渲染第二行第一列
      if (rowIndex === 1 && columnIndex === 0) {
        return [1, 0]
      }
}

实现展示效果:

请添加图片描述

合并的关键在于找准你要合并行、列的规则。然后合并初始列、行进行合并,return [n, m] , 在后续的行、列中则需要处理n - 1时,返回return [0, 1] 控制行或者return [1, 0] 控制列

你可能感兴趣的:(element-ui 实记问题记录)