【vue】element-UI table组件根据后台不同的传值修改页面显示结果

最新推荐文章于 2023-11-28 21:27:06 发布

言清歌

最新推荐文章于 2023-11-28 21:27:06 发布

阅读量597

点赞数 1

分类专栏： vue学习文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/Hypnotic0624/article/details/120489823

版权

vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该示例展示了如何根据后端传来的status值动态改变HTML表格中状态列的内容，以及操作列中按钮的显示。当status为'0'时，状态显示为'已过期'，提供'重新分享'按钮；当status为'1'时，状态显示为'未过期'，提供'取消分享'按钮。实现了前端与后端数据的交互，动态更新界面元素。

摘要由CSDN通过智能技术生成

需求描述：根据后端传值status，修改状态和操作栏的显示内容
实现效果
HTML部分

<el-table :data="shareData" align="center" style="width: 100%">
	<el-table-column align="center" type="index" label="序号" :index="indexMethod"></el-table-column>
	<el-table-column align="center" prop="share_id" label="分享人" width="120"></el-table-column>
	<el-table-column align="center" prop="start_at" label="开始时间" width="180"></el-table-column>
	<el-table-column align="center" prop="end_at" label="结束时间" width="180"></el-table-column>
	<el-table-column align="center" prop="status" label="状态" width="111">
		<template slot-scope="scope">
			<span style="color:red" v-if="scope.row.status === '0'">已过期</span>
			<span v-if="scope.row.status === '1'">未过期</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="操作" width="111">
		<template slot-scope="scope">
			<el-button v-if="scope.row.status === '0'" type="text" @click="reShare(scope.row)">重新分享</el-button>
			<el-button v-if="scope.row.status === '1'" type="text" @click="unShare(scope.row)">取消分享</el-button>
		</template>
	</el-table-column>
</el-table>

js部分

export default {
  data() {
    return {
      shareData: [
        {
          share_id: 'XXX',
          start_at: '2021-09-21 8:01:00',
          end_at: '2021-09-24 8:01:00',
          status: '0',
        },
        {
          share_id: 'XXX',
          start_at: '2021-09-21 8:01:00',
          end_at: '2021-10-21 8:01:00',
          status: '1',
        },
      ],
     }
    };
}