elementUi判断数据是正数或者负数。展示不同状态的图标

一个前端不会用git

于 2022-07-09 08:45:22 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签：前端开发 Vue el-table SVG图标数值判断

本文链接：https://blog.youkuaiyun.com/maoxiaohei_/article/details/125689085

版权

Vue 专栏收录该内容

57 篇文章

订阅专栏

这篇博客主要介绍了如何在前端表格组件中处理数值数据，通过`getAddUsedVal`方法判断数值是正数、负数还是零，并根据判断结果动态设置SVG图标的显示。示例代码展示了在`el-table`中处理`增加值`和`环比`两列数据的逻辑，实现了数值与图标的结合展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示意图
在这里插入图片描述
给两个不同的icon取一样前缀的名字，然后判断是否是正数，或者负数

		<el-table :data="tableData" style="width: 100%" border height="calc(100vh - 320px)">
 			<el-table-column label="增加值">
              <template slot-scope="scope">
                <div>{{ scope.row.addUsed }}
                  <svg-icon :icon-class="getAddUsedVal(scope.row.addUsed)"></svg-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="环比">
              <template slot-scope="scope">
                <div>{{ scope.row.scale }}
                  <svg-icon :icon-class="getAddUsedVal(scope.row.scale)"></svg-icon>
                </div>
              </template>
            </el-table-column>
         </el-table>

  methods: {
    // 判断值
    getAddUsedVal(v) {
      v = v + ''
      let res = ''
      if (v === '0.0' || v === '0' || v === '-') {
        res = ''
      } else if (v.indexOf('-') > -1) {
        res = 'down'
      } else {
        res = 'up'
      }
      return res
    },