1.前端使用elg-pro-table 数据表格:

<elg-pro-table
          class="custom-card"
          ref="table"
          :datasource="url"
          :columns="columns"
          :where="where"
          :border="true"
          :toolkit="[]"
          toolbar
          :loading="loading"
        >
</elg-pro-table>

2.其中使用是columns表格:

 // 表格列配置
 columns: [
        {
          prop: 'voucherNo',
          label: '凭证号',
          showOverflowTooltip: true,
          minWidth: 100 ,
          className: 'textType'
        },
        {
          prop: 'originalCurrencyDebit',
          label: '借方金额',
          showOverflowTooltip: true,
          minWidth: 120,
          className: 'moneyType',
          formatter:  (value) => {//使用formatter,其中value是整个columns中的一行数据
              //value.originalCurrencyDebit和上面的prop的内容一致
              return commonApi.changeMoney(value.originalCurrencyDebit);
          }
        },
],

3.其中commonApi.changeMoney()方法是引用的一个api方法:

//数值转换
changeMoney(value){
   if(value === ""){//当value为空时,前台显示-
         return '-'
   }else{
//当value等于0或者是字符串0时,显示-
        if ("0.00"===value || "0"===value || value ===0 || value ===0.00) {
           return '-'
        }else{
//判断一个变量value是否小于0。如果value小于0,那么isNegative的值就是true,否则就是false。
   let isNegative = value < 0;
//下面一行代码是将一个数值value转换为千分位格式的字符串,并保留两位小数。具体步骤如下:
 //1.使用Math.abs(value)函数获取value的绝对值,确保结果为正数。
 //2.使用parseFloat()函数将绝对值转换为浮点数类型。
 //3.使用toFixed(2)方法将浮点数保留两位小数。
 //4.使用正则表达式/\d(?=(\d{3})+\.)/g匹配小数点前的每三位数字,并在其前面添加逗号分隔符。
 //5.最终得到的结果存储在变量result中。
 let result = parseFloat(Math.abs(value)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        if (isNegative) {//当isNegative是false时,下面的数据加上-,
            result = '-' + result;
         }
         return  result
        }
    }
},

至此结束。

style小贴士:

<style>
        /* 默认居中 */
  .custom-card .el-table__body td {
      text-align: center;
  }
  /* 金额类居右 */
  .custom-card .el-table__body td.moneyType {
      text-align: right;
  }
  /* 文本类居左 */
  .custom-card .el-table__body td.textType {
      text-align: left;
  }
</style>

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐