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