鍍金池/ 問答/HTML/ vue.js怎么通過prop在el-table只顯示出中符合要求的行?

vue.js怎么通過prop在el-table只顯示出中符合要求的行?

clipboard.png
期望未簽約這個(gè)頁面只顯示未簽約的合同
期望以簽約這個(gè)頁面只顯示以簽約的合同
期望已過期這個(gè)頁面只顯示已過期的合同
關(guān)鍵部分代碼如下：

<template v-if="message === 'third'">

<el-table
    :data="table"
    border
    style="width: 100%"
    height="600">
    <el-table-column prop="date" label="合同名稱" style="width: 70%">
    </el-table-column>
    <el-table-column :name2="name" label="狀態(tài)" style="width: 30%">
    </el-table-column>
</el-table>

</template>
這是測(cè)試的數(shù)據(jù)

clipboard.png

回答
編輯回答
笨尐豬

使用 computed, 根據(jù)不同頁面對(duì)數(shù)據(jù)進(jìn)行過濾。
比如: 未簽約頁面

<template>
<el-table
    :data="unsigns"
    border
    style="width: 100%"
    height="600">
    <el-table-column prop="date" label="合同名稱" style="width: 70%">
    </el-table-column>
    <el-table-column :name2="name" label="狀態(tài)" style="width: 30%">
    </el-table-column>
</el-table>
<template>
export default {
  data() {
      table: [{xxx} ......]
  },
  computed : {
    unsigns () {
       return this.table.filter(item => item.name === '未簽約')
    }
  }
}
2017年2月22日 01:39
編輯回答
互擼娃

切換時(shí)候過濾下數(shù)據(jù)不行

2018年6月14日 05:28