快捷導(dǎo)航

Element-ui table中過濾條件變更表格內(nèi)容的方法

更新時(shí)間：2018年03月02日 09:39:48 作者：你蠢哭我咯

下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

組件中：

<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
  <el-table-column prop="sex" label="性別" width="100" :formatter="formatSex" sortable>
  </el-table-column>
  <el-table-column prop="cz" label="操作" width="320">
     <template scope="scope">
       <el-button size="small" 
         @click="handleEdit(scope.$index, scope.row)">編輯
       </el-button>
       <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
         {{scope.row.status | formatStatus}}
       </el-button>
     </template>
   </el-table-column>
</el-table>

js中：

filters: {
   formatStatus: function (val) {
    console.log(val)
    return val == 1 ? '上架' : val == 2 ? '下架' : '未知';
  },
},
methods: {
//性別顯示轉(zhuǎn)換
  formatSex: function (row, column) {
    return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  },
}

以上這篇Element-ui table中過濾條件變更表格內(nèi)容的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)div可拖動位置也可改變盒子大小的原理
這篇文章主要介紹了vue實(shí)現(xiàn)div可拖動位置也可改變盒子大小，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-09-09
Vue自定義組件使用事件修飾符的踩坑記錄
vue提倡的是在方法中只有對數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件使用事件修飾符的相關(guān)資料,需要的朋友可以參考下
2021-05-05
詳解vue中axios的使用與封裝
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vuex中Store的簡單實(shí)現(xiàn)
這篇文章主要介紹了Vuex中Store的簡單實(shí)現(xiàn),為了在 Vue 組件中訪問 this.$store property,你需要為 Vue 實(shí)例提供創(chuàng)建好的 store,Vuex 提供了一個(gè)從根組件向所有子組件,以 store 選項(xiàng)的方式注入該 store 的機(jī)制,需要的朋友可以參考下
2023-11-11
vue項(xiàng)目配置eslint保存自動格式化問題
這篇文章主要介紹了vue項(xiàng)目配置eslint保存自動格式化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動定位方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列，文章基于Vue2?的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下
2022-04-04
vue element-ui之怎么封裝一個(gè)自己的組件的詳解
這篇文章主要介紹了vue element-ui之怎么封裝一個(gè)自己的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue中組件如何使用vue-quill-editor
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01