<el-table-column prop="status" label="用户状态" width="180"> <template slot-scope="scope"> <el-tag v-if="scope.rows.status == 1">正常</el-tag> <el-tag v-else type="danger">禁用</el-tag> </template> </el-table-column>
时间: 2023-10-08 12:11:47 浏览: 231
这段代码是一个使用了 Element UI 的表格组件,其中定义了一个表格列,用于展示用户状态。`prop` 属性指定了该列绑定的数据字段为 `status`,`label` 属性则指定了列的标题为 "用户状态",`width` 属性指定了该列的宽度为 180 像素。
在模板中使用了 `<template slot-scope="scope">` 来定义一个插槽,并通过 `scope` 对象获取当前行的数据。在插槽中使用了条件判断,根据 `scope.row.status` 的值来展示不同的标签。如果 `status` 的值为 1,则显示一个绿色的标签显示为 "正常",否则显示一个红色的标签显示为 "禁用"。这样可以根据数据的不同状态来显示不同的标签内容。
相关问题
<el-table :data="tableData" stripe size="medium"> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="orderno" label="订单编号" width="200"></el-table-column> <el-table-column prop="total" label="总金额"></el-table-column> <!-- <el-table-column prop="userid" label="用户id"></el-table-column>--> <el-table-column prop="status" label="状态" width="80"> <template v-slot="scope"> <el-tag type="info" v-if="scope.row.status === 0">已取消</el-tag> <el-tag type="warning" v-if="scope.row.status === 1">待支付</el-tag> <el-tag type="primary" v-if="scope.row.status === 2">待发货</el-tag> <el-tag type="primary" v-if="scope.row.status === 3">待收货</el-tag> <el-tag type="danger" v-if="scope.row.status === 4">待评价</el-tag> <el-tag type="success" v-if="scope.row.status === 5">已完成</el-tag> <el-tag type="warning" v-if="scope.row.status === 6">申请退款中</el-tag> <el-tag type="success" v-if="scope.row.status === 7">退款成功</el-tag> </template> </el-table-column> <el-table-column prop="createTime" label="创建时间"></el-table-column> <el-table-column label="详情" width="100" align="center"> <template v-slot="scope"> <el-button @click="detail(scope.row.id)">查看详情</el-button> </template> </el-table-column> 添加注释
这是一个Vue组件,用于展示一个表格。其中,表格数据来源于tableData,表格行的各个属性通过prop来指定,表格列的标题通过label来指定,表格列的宽度通过width来指定。其中,状态列通过使用template和v-slot来自定义展示,不同状态对应的标签通过el-tag来实现。最后一列添加了一个按钮,通过点击按钮来触发detail方法,查看表格中对应行的详情。
根据这段代码增加一个删除用户按钮<div class="user-data" > <el-table class="user-data-table" :data="tableData" border stripe style="width: 100%"> <el-table-column prop="userId" label="用户ID" width="100"> </el-table-column> <el-table-column prop="userName" label="用户名称" width="120"> </el-table-column> <el-table-column prop="userSex" label="用户性别" width="100"> </el-table-column> <el-table-column prop="userAccount" label="用户账号" width="150"> </el-table-column> <el-table-column prop="userPassword" label="用户密码" width="150"> </el-table-column> <el-table-column prop="userEmail" label="用户邮箱" width="200"> </el-table-column> <el-table-column prop="userIntroduction" label="用户简介" width="200"> </el-table-column> <el-table-column prop="userIdentity" label="用户身份" width="100"> </el-table-column> <el-table-column prop="userPortrait" label="用户头像" width="450"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button> </el-popconfirm> </template> </el-table-column> </el-table>
可以在最后一个 `<el-table-column>` 中增加一个删除按钮,如下所示:
```
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
<el-popconfirm title="确定删除该用户吗?" @onConfirm="handleDelete(scope.row)">
<el-button type="text" size="small" icon="el-icon-delete">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
```
其中,增加了一个 `el-popconfirm` 弹出框,当点击删除按钮时,会弹出该弹出框,询问用户是否确认删除该用户,当用户确认删除时,会调用 `handleDelete` 方法来删除该用户。你需要在 `methods` 中定义 `handleDelete` 方法来实现删除用户的逻辑。
阅读全文