鍍金池/ 問答/HTML/ element ui table 過濾表格內的數(shù)據(jù)的問題

element ui table 過濾表格內的數(shù)據(jù)的問題

我使用element ui tabel的組件

<el-table :data="barrelList" style="width: 100%">
    <el-table-column
        prop="workingState"
        label="工作狀態(tài)">
      </el-table-column>
</el-table>
const workingState = [
    { key: '1', display_name: '狀態(tài)11' },
    { key: '2', display_name: '狀態(tài)22' },
    { key: '4', display_name: '狀態(tài)55' },
    { key: '8', display_name: '狀態(tài)33' },
    { key: '10', display_name: '狀態(tài)44' }
  ]

  const workingStateValue = workingState.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

filters: {
      workingFilter(type) {
        return workingStateValue[type]
      }
    },

我希望通過workingFilter的過濾去過濾表格內的數(shù)據(jù)，但我這樣處理時：

<el-table :data="barrelList" style="width: 100%">
    <el-table-column
        prop="workingState | workingFilter"
        label="工作狀態(tài)">
      </el-table-column>
</el-table>

是沒有效果的，能有什么解決方案嗎

回答
編輯回答
陪我終

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。,作為prop屬性值，顯然沒有效果。

prop的屬性值，應該對應barrelList里面相應屬性名。這里過濾應該沒什么效果。

可以在 el-table-column上使用 filter-method 屬性，綁定一個回調函數(shù)，進行每列數(shù)據(jù)過濾。

2017年9月1日 06:18
編輯回答
抱緊我

過濾數(shù)據(jù)用 computed 計算屬性來實現(xiàn)

| 不是這樣用的

2017年12月27日 05:32