element ui 添加自定義方法

今天在修改 el-table 源碼過程中遇到一個(gè)頭大的問題，原本修改編譯后，將 element的子目錄lib下的文件復(fù)制到項(xiàng)目的響應(yīng)目錄里就可以了，但是，這次不知為何，編譯老是出問題，實(shí)在沒有辦法，我就直接修改項(xiàng)目中 node_modules 目錄下的 lib 的文件。
為了找到正確的修改點(diǎn)，在代碼中加入了以下代碼，方便進(jìn)入跟蹤模式，知道進(jìn)入 el-table 的代碼的入口：

    debugger
    this.$refs.table.doLayout()

運(yùn)行時(shí)，在單步執(zhí)行 doLayout 方法后，就能知道 doLayout 的代碼入口文件和位置，這樣就可以在相同位置，插入自己的代碼。
我需要實(shí)現(xiàn)的效果是通過代碼來實(shí)現(xiàn)表格過濾的效果，即模擬點(diǎn)擊列頭選擇某個(gè)過濾值實(shí)現(xiàn)表格過濾的效果。通過上述代碼跟蹤，了解到需要在element-ui.common.js文件中插入代碼，具體代碼如下：

    execFilter: function execFilter(column, filteredValue) {
      this.store.commit('filterChange', {
        column: column,
        values: filteredValue
      });
      this.store.updateAllSelected();
    },

上述代碼中，為何通過 filterChange 來實(shí)現(xiàn)過濾，是通過關(guān)鍵字搜索 + 閱讀代碼分析得到。
在這之前，通過對(duì) el-table 原本的過濾實(shí)現(xiàn)的代碼進(jìn)行跟蹤，將 filterChange 方法的 column 和 fliteredValue 參數(shù)值進(jìn)行截圖保存，發(fā)現(xiàn) column 不是 el-table-column，而是一個(gè) javascript 對(duì)象，故通過對(duì) el-table-column 對(duì)象的屬性進(jìn)行排查，發(fā)現(xiàn) columnConfig 屬性的值就是該方法所需數(shù)據(jù)，而 filteredValue 的值是一個(gè)包含過濾值的數(shù)組，為此，構(gòu)建了如下調(diào)用代碼：

    var column = this.$refs.companyColumn;
    var filteredValue = [this.$refs[this.refName][0].companyBriefName]
    this.$refs.table.execFilter(column.columnConfig, filteredValue)

經(jīng)過測(cè)試，非常完美的解決了問題。

補(bǔ)充：

elementUI 事件添加自定義參數(shù)，以及子組件emit傳參 父組件增加自定義參數(shù)

一、elementUI 事件添加自定義參數(shù)

@visible-change="val => dropDownOpen(val, 自定義參數(shù)) ，val為事件默認(rèn)返回的參數(shù)

<el-dropdown size="small" trigger="hover" @visible-change="val => dropDownOpen(val, index)">

二、子組件emit傳參 父組件增加自定義參數(shù)

情況：父組件循環(huán)子組件時(shí)，除子組件傳出來的參數(shù)，還想要拿到循環(huán)的index

父組件：
<div v-for='(item,index) in list' :ket='index'>
<child @testFun='testFun'><child>
</div>
子組件：
<div @clicl='chilfFun'>測(cè)試數(shù)據(jù)<div>
js：
chilfFun(){
this,$emit('testFun','canshu')
}

解決：<child @testFun=‘e=》testFun（自定義的參數(shù)）’>

<div v-for='(item,index) in list' :ket='index'>
<child @testFun='e=》testFun（index）'><child>
</div>

到此這篇關(guān)于element ui 添加自定義方法的文章就介紹到這了,更多相關(guān)element ui 添加自定義內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論