element ui 添加自定義方法

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

    debugger
    this.$refs.table.doLayout()

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

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

上述代碼中，為何通過 filterChange 來實現(xiàn)過濾，是通過關(guān)鍵字搜索 + 閱讀代碼分析得到。
在這之前，通過對 el-table 原本的過濾實現(xiàn)的代碼進行跟蹤，將 filterChange 方法的 column 和 fliteredValue 參數(shù)值進行截圖保存，發(fā)現(xiàn) column 不是 el-table-column，而是一個 javascript 對象，故通過對 el-table-column 對象的屬性進行排查，發(fā)現(xiàn) columnConfig 屬性的值就是該方法所需數(shù)據(jù)，而 filteredValue 的值是一個包含過濾值的數(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)過測試，非常完美的解決了問題。

補充：

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

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

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

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

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

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

父組件：
<div v-for='(item,index) in list' :ket='index'>
<child @testFun='testFun'><child>
</div>
子組件：
<div @clicl='chilfFun'>測試數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論