element 表格里面如何使用el-tag
时间: 2023-04-10 21:01:56 浏览: 203
你可以在 element 表格中使用 el-tag,只需要在表格中的列定义中添加一个自定义的 slot,然后在该 slot 中使用 el-tag 组件即可。具体实现可以参考 element 官方文档中的示例代码。
相关问题
<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>
这段代码是一个使用了 Element UI 的表格组件,其中定义了一个表格列,用于展示用户状态。`prop` 属性指定了该列绑定的数据字段为 `status`,`label` 属性则指定了列的标题为 "用户状态",`width` 属性指定了该列的宽度为 180 像素。
在模板中使用了 `<template slot-scope="scope">` 来定义一个插槽,并通过 `scope` 对象获取当前行的数据。在插槽中使用了条件判断,根据 `scope.row.status` 的值来展示不同的标签。如果 `status` 的值为 1,则显示一个绿色的标签显示为 "正常",否则显示一个红色的标签显示为 "禁用"。这样可以根据数据的不同状态来显示不同的标签内容。
<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>
这段代码是一个使用了 Element UI 的表格组件,其中定义了一个表格列,用于展示用户状态。`prop` 属性指定了该列绑定的数据字段为 `status`,`label` 属性则指定了列的标题为 "用户状态",`width` 属性指定了该列的宽度为 180 像素。
在模板中使用了 `<template slot-scope="scope">` 来定义一个插槽,并通过 `scope` 对象获取当前行的数据。在插槽中使用了条件判断,根据 `scope.row.status` 的值来展示不同的标签。如果 `status` 的值为 1,则显示一个绿色的标签显示为 "正常",否则显示一个红色的标签显示为 "禁用"。这样可以根据数据的不同状态来显示不同的标签内容。