美文网首页
table中是否显示、显示状态变更

table中是否显示、显示状态变更

作者: 指尖架构141319 | 来源:发表于2020-05-20 15:53 被阅读0次

1.按钮是否显示

<el-table-column label="Operation" width="90" align="center" fixed="right">
  <template slot-scope="scope">
      <el-button type="text" size="small" 
          v-if="scope.row.user!='Online Deposit'" @click="detail()">
          Detail</el-button>
  </template>
</el-table-column>

按钮中v-if判断是否显示

2.三目运算

<el-table-column prop="status" label="Status" width="150" align="center">
   <template slot-scope="scope">
       {{scope.row.status == 1 ? 'Succeeded' : scope.row.status == 2 ? 
        'Approvaling' : scope.row.status == 3 ? 'Cancelled': ''}}
   </template>
</el-table-column>

3.根据状态不同,显示状态不同

当状态为成功,重试按钮置灰
效果:


image.png
<el-table-column label="操作" min-width="90" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.recordStatus==1" disabled="true" size="small" @click="retry(scope.row)">重试</el-button>
          <el-button type="text" v-if="scope.row.recordStatus!=1" size="small" >重试</el-button>
          <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>

相关文章

网友评论

      本文标题:table中是否显示、显示状态变更

      本文链接:https://www.haomeiwen.com/subject/kbhnohtx.html