theboyaply

学,就硬学!

  • Home
  • Archives
  • Java
  • Maven
  • Docker
  • Kubernetes
  • JavaScript
  • ES6
  • Vue
  • 踩坑记录
  • noted

  • 搜索
element ui vue wsimport webservice npm mysql redis node nginx nfs ftp es6 开发工具 vscode 前端 javascript springboot 常见问题 tomcat oracle jenkins maven k8s Linux gitlab docker java

ElementUi+Vue2使用技巧

发表于 2022-11-29 | 分类于 Vue | 0 | 阅读次数 57

  • 简介
  • el-table-column中formatter传额外的参数
  • 继承el-input-number实现千分位及max-precision效果

简介

本章记录element ui+vue2中常见的使用技巧和常见问题。

el-table-column中formatter传额外的参数

https://cloud.tencent.com/developer/ask/232934

https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes

el-table-column中的formatter默认回传row, column, cellValue, index四个参数,如果要传入其他参数,可以用这个方式:

:formatter="(...args) => yourFormatterFun(yourParams, ...args)"

继承el-input-number实现千分位及max-precision效果

新增组件BaseInputNumber,其index.vue文件内容如下:

<script>
import ElInputNumber from 'element-ui/packages/input-number';

export default {
  extends: ElInputNumber,
  name: 'BaseInputNumber',
  computed: {
    displayValue() {
      if (this.userInput !== null) {
        return this.userInput;
      }

      let currentValue = this.currentValue;

      if (typeof currentValue === 'number') {
        if (this.stepStrictly) {
          const stepPrecision = this.getPrecision(this.step);
          const precisionFactor = Math.pow(10, stepPrecision);
          currentValue = (Math.round(currentValue / this.step) * precisionFactor * this.step) / precisionFactor;
        }
        if (this.precision !== undefined) {
          // 改动1:多余的精度不需要用0补充
          // currentValue = currentValue.toFixed(this.precision);
        }
      }
      // 改动2:格式化为千分位
      return this.formatterNumber(currentValue);
      // return currentValue;
    },
  },
  methods: {
    handleFocus(event) {
      // 改动3:获得焦点时,恢复真实的值,给用户编辑
      this.userInput = this.currentValue;
      this.$emit('focus', event);
    },
    handleBlur(event) {
      // 改动4:失去焦点时,为了触发disaplayValue的计算(防止用户不编辑直接失去焦点),这里模仿handleInputChange方法,把userInput设置为null
      this.userInput = null;
      this.$emit('blur', event);
    },
    formatterNumber(num) {
      if (!num) {
        return num;
      }
      num = num.toString();
      let prefix = '';
      let suffix = '';
      if (num.indexOf('.') === -1) {
        prefix = num;
      } else {
        prefix = num.substring(0, num.indexOf('.'));
        suffix = num.substring(num.indexOf('.'));
      }
      prefix = `${prefix}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return `${prefix}${suffix}`;
    },
  },
};
</script>

– end –

# vue # element ui
使用java的wsimport生成Webservice客户端代码
  • 文章目录
  • 站点概览
theboyaply

theboyaply

好记性不如烂笔头

184 日志
13 分类
27 标签
Github E-mail
Creative Commons
0%
© 2019 — 2023 theboyaply
由 Halo 强力驱动
|
主题 - NexT.Gemini
湘ICP备19009291号

湘公网安备 43312402001034号