主要是记录一些在使用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>
在处理分页数据的时候，主要考虑了几个点：
- 初始加载后，后续触发的加载逻辑则需要合并之前的数据
initLoad标识 - 不是第一次加载，则需要判定，触发滚动加载是不是已经加载完了
pageNo * pageSize >= this.pageOptions.total；所以在滚动加载时，需要手动传递当前页码参数 - 另一个就是我们开启了搜索，则在搜索的时候，需要重新从第一页加载
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] 控制列
网友评论