element-Ui 问题记录(个人笔记)

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element-Ui 问题记录(个人笔记)相关的知识，希望对你有一定的参考价值。

参考技术A

在我们使用element进行开发的时候，有时会出现一些奇怪的问题，这些问题有可能是框架本身的缺陷，也有可能是我们使用不当，遂将在开发过程中遇到的问题和值得记录下来的东西，做一个集合，方便以后参考。

在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件，并用第三个变量来控制显示与隐藏。并在visible后加.sync。

ElementUI Form表单验证不通过，明明有值, 验证的错误信息不消失。

注意的点：

用props属性来配置成和后台数据一样的字段。

1、检查是否赋值成功；
2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配（可能后端先随便写的）

注意：1.v-model绑定的值格式为 [12,23,34] 这种格式，如果不是需要进行处理。2.检查返回id数组与下拉框列表中的数据是否有匹配，如果不匹配则显示不了文字。

[Vue warn]: <transition-group> children must be keyed: <ElTag>报错

在 保证绑定的数据类型与后台数据类型一致 的情况下，还出现以上报错，可能有以下原因：

勾选时默认获取到的节点是不包括半选状态的，所以我们前端传过去之后往往返回的也不包括半选状态的，所以反显的时候不正确。处理方法如下：

解决方案：

1.设置check-strictly
checkStrictly是一个变量,默认值是false
2.拿到接口数据后：

去除单选按钮里的数字，只需添加空格标签 &nbsp; 就行了。

解决方法：设置为具体的数值或百分比。( 注：每一个el-form-item可以设置单独的label-wodth。)

我们直接绑定一个事件的时候，事件默认有一个参数，但是我们想传第二个参数的时候，需要怎么传，以下就是解决方法：

https://blog.csdn.net/weixin_43970743/article/details/88532307

如果 v-model 是二级字段，而js中又设置了默认选择项，则点击无反应。
解决办法：
v-model绑定的值改成一级对象。

请求接口数据赋值后，页面上input框正常显示，值也是对的，但是不可编辑。
解决办法：
使用vue的全局api方法，this.$set(data, property, value)

在每次弹出对话框的时候深拷贝一次当前行数据的副本

在一些用户注册场景中，提交整个表单前有时候我们会做一些单独字段的校验，例如发送手机验证码，发送时我们只需要校验手机号码这个字段，可以这样做：

如果需要多个参数，将参数改为数组形式即可。

全局设置

......

element-ui 实记问题记录

主要是记录一些在使用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] 控制列

以上是关于element-Ui 问题记录(个人笔记)的主要内容，如果未能解决你的问题，请参考以下文章

Python学习个人记录笔记

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

Mysql（个人学习笔记20170321-20170328）

element-ui属性记录

element-ui table