vue 表格内容根据状态展现不同的颜色或者文字代替状态true/false OR 0/1等

最新推荐文章于 2023-10-31 10:20:35 发布
最新推荐文章于 2023-10-31 10:20:35 发布
阅读量3.3k 收藏 7
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41190941/article/details/104701668
版权

vue 表格内容，根据返回的状态的不同展现不同的颜色或者文字代替状态true/false OR 0/1等

直接上代码

  <!--根据状态转换成可视内容-->
        <template scope="scope">
          <span v-if="scope.row.status==0"
最低0.47元/天 解锁文章
五行缺钱.
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue element ui表格数据0 1转换为是否
weixin_42692989的博客
03-19 2605
vue element ui表格数据0 1转换为是否1. vue内添加 :formatter="formatFreeShippingInfo"2. methods:{}里写formatFreeShippingInfo()方法 1. vue内添加 :formatter=“formatFreeShippingInfo” <el-table-column :formatter="formatFreeShippingInfo" prop="isFreeShipping" label="是否包邮"
vue中改变选中当前项的显示隐藏或者状态的实现方法
08-28
{ id: 1, name: '项1', isSelected: false, isVisible: true }, // 更多项目... ], }; }, methods: { toggleItemSelection(item) { item.isSelected = !item.isSelected; // 可能还需要根据选中状态调整...
Vue + ElementUI 动态显示表格某个单元格：值和颜色
11-07 5442
方法一：直接在template scope 使用v-if判断 <el-table-column prop="status" label="显示状态"> <template scope="scope"> <span v-if="sc...
table每个单元格错误信息展示，根据后端返回的错误信息进行显示,并且错误信息标红
m0_46483779的博客
10-19 266
错误信息再table单元格中标红，需要在table中加上:cell-style="rowStyleHandle"属性。
elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示
zheshihuahua的博客
08-30 1381
首先：需要在表格行加入 标签。
遍历元素根据状态显示不同颜色
马优晨
10-23 1873
如上图所示是一个列表遍历出来的结果，数据状态如下： list: [ { id: 1, src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg', name: '齐天大肾', stat...
vue根据条件不同显示不同按钮的操作
10-15
Vue.js 是一款流行的前端框架，...通过这些方法，我们可以更灵活地根据数据条件在 Vue 应用中展示不同的按钮或内容，提高用户体验并保持代码的简洁和可维护性。在实际开发中，可以根据项目需求选择最合适的实现方式。
vue + element 表格内容筛选、表格列展示隐藏
最新发布
05-13
在Vue.js框架中结合Element UI库进行前端开发时，表格组件是常见的数据展示方式。Element UI的表格组件功能强大，可以实现多种定制化需求，如内容筛选和列的展示隐藏。下面将详细介绍这两个功能的实现。 一、表格...
vue2.0 根据状态值进行样式的改变展示方法
08-27
在Vue 2.0中，动态地根据状态值改变元素的样式是常见的需求，这有助于创建响应式的用户界面。下面我们将详细探讨如何实现这一功能。 首先，Vue.js 提供了一个非常方便的特性，即 `v-bind` 或其简写 `:`，它允许我们...
antv/x6封装vue2.0源码
05-13
Vue 可以管理这些操作的状态，如拖动过程中预览连线、释放鼠标时确认创建或取消等。 4. **拖拽生成功能：** 拖拽生成是指用户可以通过拖动操作在画布上添加新的节点。这需要结合 X6 的 `on('dragstart')`、`on('...
Element Table 表格后台数据 是true或者false页面需要展示是或者否
MW
07-11 1929
靠过滤器 全代码 第二种全局过滤器 在项目main.js中引用全局过滤器 页面直接使用
聊一聊如何在 Vue3 表单中显示和隐藏元素
前端达人
10-31 1480
文章目录介绍创建表单元素绑定表单元素使用下拉框表单显示/隐藏元素使用复选框表单显示或隐藏元素将所有的代码整合在一起v-show和v-if的区别介绍在处理表单时，根据所选选项，显示或隐藏各种字段是很常见的。我将使用Vue来有条件地显示或隐藏表单元素。在这个例子中，我将使用SFC（单文件组件）以便于我们使用。您将在下面的“将所有内容放在一起”部分中完整地看到它。创建表单元素这里有两个选择元素，想象一下...
Avue根据不同结果，展示不同样式
qq_34471241的博客
05-14 1916
实现的效果：正常显示蓝色，告警显示红色。 1、在需要设置样式的字段设置插槽，solt:true option: { height:'auto', calcHeight: 30, tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: true, view..
【Vue】二：Vue核心处理---条件渲染
北极星的博客
05-29 108
因为 v-if 是一个指令，他必须依附于某个元素。如果使用div不太合适，使用template比较合适。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时才被渲染。按条件展示，为true,则展示，为false,则不展示。如果一个元素频繁隐藏和显示，则使用v-show。
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7730
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
vue元素显示隐藏 v-if 和 v-show 指令
yufengguanyun的博客
02-11 9328
v-if 和 v-show 在vue中，v-if 和 v-show 会根据接收true/false信息使得页面上元素达到显示或隐藏的效果。 语法： <标签 v-if="true/false"></标签> <标签 v-show="true/false"></标签> <!--true:显示 false:隐藏--> 1 2 3 4 5 原理： v-if：通过创建、销毁dom元素的方式达到显示、隐藏效果(销毁后有一...
vue 按钮根据状态切换_Vue.js点击切换按钮改变内容的实例讲解
weixin_39827306的博客
12-19 3227
代码实例：代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。vue点击切换改变内容new Vue({el:"#example",data:{flag:true,//单位切换开关btnText:'元/吨',},methods:{showToggle:function(){thi...
Vue指令
奈&何.
12-03 726
Vue指令
vue中一个动态的表格 根据不同的状态值 判断使用不同的数据字典 并显示字典内容
06-09
可以使用 Vue 的计算属性来根据不同的状态值判断使用不同的数据字典，并根据字典内容动态显示表格内容。具体步骤如下： 1. 在 Vue 组件中定义一个对象或数组，表示状态值与对应的数据字典的映射关系。例如： ``` const statusDict = { 1: { text: '待审核', color: 'orange' }, 2: { text: '已审核', color: 'green' }, 3: { text: '审核不通过', color: 'red' } }; ``` 2. 在 Vue 组件中定义一个计算属性 `tableData`，根据状态值从数据字典中获取对应的文本和颜色，并将其作为表格的一列数据。例如： ``` <template> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>状态</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td :style="{ color: item.status.color }">{{ item.status.text }}</td> </tr> </tbody> </table> </template> <script> const statusDict = { 1: { text: '待审核', color: 'orange' }, 2: { text: '已审核', color: 'green' }, 3: { text: '审核不通过', color: 'red' } }; export default { data() { return { data: [ { id: 1, name: '商品1', status: 1 }, { id: 2, name: '商品2', status: 2 }, { id: 3, name: '商品3', status: 3 } ] }; }, computed: { tableData() { return this.data.map(item => { return { id: item.id, name: item.name, status: statusDict[item.status] }; }); } } }; </script> ``` 在上述代码中，通过计算属性 `tableData`，将原始数据中的状态值转换成对应的文本和颜色，并将其作为表格的一列数据显示出来。其中，`:style="{ color: item.status.color }"` 控制状态列的颜色，`item.status.text` 控制状态列的文本内容。 需要注意的是，在实际开发中，数据字典和状态值可能是从后端接口动态获取的，需要根据实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值