请问如何做到当状态栏变为“失效”时，下载按钮消失的功能啊？

Question

问题遇到的现象和发生背景

我想用vue达成当表格状态栏的失效时间结束后，下载按钮也消失。

问题相关代码，请勿粘贴截图

 <el-table
      v-loading="loading"
      :data="downloadContent"
      border
      height="740"
      style="width: 100%"
      :default-sort="{ prop: 'createTime', order: 'descending' }"
    >
      <el-table-column prop="id" label="序号" type="index" width="70px"></el-table-column>
      <el-table-column prop="resName" label="文件名"></el-table-column>
      <el-table-column prop="dataType" label="下载类型">
          <template slot-scope="scope">
          <dict-tag :options="dataType" :value="scope.row.dataType"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="下载时间"
        sortable
      ></el-table-column>
      <el-table-column prop="dlFileExpireTime" label="失效时间">
      </el-table-column>
      <el-table-column prop="dlStatus" label="状态">
        <template slot-scope="scope">
          <dict-tag :options="status" :value="scope.row.dlStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini">查看</el-button>
        <el-button size="mini" :key="" @click="handleDownload(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

这是用element ui编写的表格代码

import { getToken } from "@/utils/auth";
import { listDownload, downloadFile } from "@/api/user/download";
export default {
  name: "Download",
  dicts: ["data_type", "dl_status"],
  data() {
    return {
      // headers: { Authorization: getToken() },
      //选中数组
      ids: [],
      //遮罩层
      loading:true,
      //总条目
      total: 1,
      //下载列表数据
      downloadContent: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startCreateTime: '',
      },
      // 文件类型字典
      dataType:[],
      // 文件状态字典
      status:[],
      //页面加载完成事件
      showData: null,
    };
  },
  created() {
       this.getList();
    this.getDicts("data_type").then(response => {
      this.dataType = response.data;
    });
    this.getDicts("dl_status").then(response => {
      this.status = response.data;
    });
  },
 mounted(){
    console.log("页面加载完成")
},
  methods: {
    //   查询下载列表
      getList(){
          this.loading = true;
          listDownload(this.queryParams).then(response =>{
            this.downloadContent = response.rows;
            this.total = response.total;
            this.loading = false;
          });
      },
    //   搜索按钮  
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },

    //重置按钮
      resetQuery(){
        this.resetForm("queryForm");
        this.handleQuery();
      },
    //下载按钮
      handleDownload(value){
        console.log(value);
        console.log(value.id);
        this.$confirm("是否下载该文件?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then((res) => {
          window.location.href = process.env.VUE_APP_BASE_API +"/mydownload/download/download?id=" + value.id + '&Authorization=' + getToken();
          // console.log(process.env.VUE_APP_BASE_API +"/mydownload/download/download?id=" + value.id +'&Authorization:' + getToken());
        });
      },
  }
};

这些是我的script

运行结果及报错内容

这是效果图

我的解答思路和尝试过的方法

我觉得这应该用vue或者JavaScript写一个方法

我想要达到的结果

我想达到当文件失效时间过后，该文件的下载按钮将不再显示

Answer 1

渲染表格前给每一行加一个状态 表示当前是否过期，过期则不显示下载按钮

<el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini">查看</el-button>
        <el-button size="mini"  v-if="scope.row.status" @click="handleDownload(scope.row)">下载</el-button>
        </template>
      </el-table-column>

```c

```