element-ui 实记问题记录

Posted 2021-11-24 heroboyluck

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

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

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

<el-table
  :row-key="id" 
  ></el-table>

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

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

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

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

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

<template>
    <div class="lazy-select">
        <el-select :value="value"
            v-lazy-load="lazyOption"
            filterable
            remote
            :remote-method="handleSearchData"
            clearable
            @clear="handleSearchData"
            @change="handleSelectData">
            <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
    </div>
</template>
<script>
  import { queryDataList } from '@/ajax'
  export default {
    name: 'select-group',
    data () {
      let $this = this
      return {
        data: [],
        pageOptions: {
          pageSize: 10,
          pageNo: 1,
          total: 0,
          totalPage: 99
        },
        lazyOption: {
          loadData: () => {
            $this.queryDataList(false, { pageNo: $this.pageOptions.pageNo + 1 })
            $this.pageOptions.pageNo++
          },
          distance: 20,
          scrollBody: '.el-scrollbar__wrap',
          fn: (fn) => {
            // 这里是在组件销毁前, 移除监听事件.
            $this.$once('hook:beforeDestroy', () => fn())
          }
        },
        initLoad: true,
        searchParams: {
          name: ''
        }
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: [String, Array],
        default: ''
      }
    },
    mounted () {
      // 初始请求数据
      this.queryDataList()
    },
    methods: {
      async queryDataList (reload = false) {
        const { pageNo, pageSize } = this.pageOptions
        const query = {
          pageNo: pageNo,
          pageSize: pageSize,
          ...this.searchParams
        }
        if (!reload && !this.initLoad && pageNo * pageSize >= this.pageOptions.total) {
          return
        }
        const res = await queryDataList(query)
        const { totalList, total } = res
        // this.data.push(...totalList)
        if (reload) {
          this.data = [...totalList]
        } else {
          this.data.push(...totalList)
        }
        this.pageOptions.total = total
        this.initLoad = false
      },
      /**
       * 远程搜索
       */
      handleSearchData (name) {
        //
        this.searchParams.name = name
        this.pageOptions.pageNo = 1
        this.queryDataList(true)
      },
      /**
       * 下拉选择值
       */
      handleSelectData (value) {
        this.$emit('change', value)
      }
    }
  }
</script>

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

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 方法来处理某一行、某一列的展示与否（仔细品这句话）

<el-table
  :span-method="tableSpanMethod"
  ></el-table>

先看一下该方法的传参

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] 控制列