vue管理系统常用方法总结

• 汇集了一些常用但是内容不是很多的方法。

下载

/ 通用下载方法
export function download(url, params, filename) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    transformRequest: [(params) => { return JSON.stringify(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob'
  }).then(async (data) => {
    const isLogin = await blobValidate(data);
    if (isLogin) {
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

日期时间过滤器（JS）

Vue.filter("dataFormat", function(originVal) {
    const dt = new Date(originVal);
    const y = dt.getFullYear();
    const m = (dt.getMonth() + 1 + "").padStart(2, "0");
    const d = (dt.getDate() + "").padStart(2, "0");

    const hh = (dt.getHours() + "").padStart(2, "0");
    const mm = (dt.getMinutes() + "").padStart(2, "0");
    const ss = (dt.getSeconds() + "").padStart(2, "0");

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});

大小写转换

/**
 * 大小写转换
 * @param str 待转换的字符串
 * @param type 1-全大写 2-全小写 3-首字母大写
 * @return str
 * */
const turnCase = (str,type) => {
  switch (type) {
    case 1:
      return str.toUpperCase();
    case 2:
      return str.toLowerCase();
    case 3:
      return str[0].toUpperCase() + str.substring(1).toLowerCase();
    default:
      return str;
  }
};

el-table 禁用单独一行

/**
 * 禁用单独一行
 * */
<el-table-column
            type="selection"
            :selectable="checkboxSelect"
            width="55">
          </el-table-column>
checkboxSelect(row) {
      return row.id !== null
    },

el-table element ui 表格实现禁止选中特殊列

/**
 * npm install --save vue-clipboard2
 *
 *
 *
 * */
<el-table-column
            type="selection"
            :selectable="checkboxSelect"
            width="55">
          </el-table-column>
checkboxSelect(row) {
      return row.id !== null
    },

el-table 拖拽行，列表数据有特殊的值，不允许拖拽超过

/**
 * 采用的sortablejs这个库完成拖拽实现
 * 下载引入需要拖拽的页面
 *  npm install sortablejs --save
 *  import Sortable from 'sortablejs'
 *  //页面挂载调用 this.rowDrop()
 * */
    //拖拽
   rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 500,
        onMove(e) {
          //拿到拖拽经过的元素把标签转成文字
          const target = e.related.innerText.replace(/\s+/g, '')
          console.log("🚀 ~ onMove ~ target", target)
          //如果拖拽的元素越过了不能拖拽的元素，就不能继续拖拽
          // console.log(',,,,,,', target.indexOf('小计'))
          if (target.indexOf('小计') !== -1) {
            if (_this.reloadData) {
              _this.$message({
                type: 'warning',
                message: '不能拖拽到其他分段,请刷新页面重新进行拖拽'
              })
            }
            _this.reloadData = true
            return false
          } else {
            // _this.reloadData = false
          }
          return true;
        },
        onEnd(evt) {
          const list = _this.tableDataT3A;
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;
          // 拖拽之后改变数据
          const oldItem = _this.tableDataT3A.splice(oldIndex, 1)[0];
          _this.tableDataT3A.splice(newIndex, 0, oldItem);
          if (_this.reloadData) {
            _this.reloadData = false
            // 复原拖拽之前的 数据
            const item = list.splice(newIndex, 1)[0];
            list.splice(oldIndex, 0, item);
            // 复原拖拽之前的 dom
            const tagName = evt.item.tagName;
            const items = evt.from.getElementsByTagName(tagName);
            if (evt.oldIndex > evt.newIndex) {
              evt.from.insertBefore(evt.item, items[evt.oldIndex + 1]);
            } else {
              evt.from.insertBefore(evt.item, items[evt.oldIndex]);
            }
          } else {
            const currRow = _this.tableDataT3A.splice(oldIndex, 1)[0]
            // console.log("🚀 ~ onEnd ~ currRow,当前拖拽的数据", currRow)
            _this.tableDataT3A.splice(newIndex, 0, currRow)
            //   拖动后获取newIdex
            let arr = Array.from(_this.tableDataT3A)
            // console.log("🚀 ~ onEnd ~ arr，拖拽之后拿到的数据", arr)
            //拖拽之后的数据
            this.apiObjDrag = arr
          }
        },
      })
    },

拖拽调整盒子左右的大小

<template>
    <div class="width-auto" id="product">
        <div class="content">
            <div id="left" class="left">
            左侧
            </div>
            <div id="line" class="resize-line"></div>
            <div id="right" class="right">
            右侧
            </div>
        </div>
   </div>
 </template>

 // 拖拽
    drapContent() {
      // 获取 左边区域 的 宽度
      let left = document.getElementById('left');
      // 获取 移动区域 的 宽度
      let line = document.getElementById('line');
      // 获取 右边区域 的 宽度
      let right = document.getElementById('right');
      // 移动区域鼠标移入事件
      line.onmousedown = function (e) {
        // 移动的距离
        let lineLeft = e.clientX;
        document.onmousemove = function (e) {
          // 移动的位置 （侧边栏的宽度 + 移动的宽度）
          let diffVal = 276 + (e.clientX - lineLeft);
          // 移动区间的范围 [276, 740]
          if (diffVal >= 40 && diffVal <= 1200) {
            // 移动区域距离左边的距离
            line.style.left = diffVal + 'px';
            // 左边缩放的宽度
            left.style.width = diffVal + 'px';
            // 右边改变后的宽度 （改变后的宽度要加上移动区域的宽度）
            right.style.width = document.getElementById('product').clientWidth - (diffVal + 16) + 'px';
          }
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        }
      }
    }
   //样式
   .content {
  display: flex;
  // position: relative;
  width: 100%;
  height: 100%;
}
.left {
  width: 260px;
  height: 100%;
}
.resize-line {
  /*鼠标移入显示左右箭头*/
  cursor: ew-resize;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  background-color: transparent;
}
.right {
  width: calc(100% - 205px);
  // width: calc(100% - 276px);
  // max-width: calc(100% - 276px);
  user-select: none;
}

el-input 常用限制

第一种正则
/**
 * 第一种正则
 * */
onkeyup="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"

/**
 * 第二种函数封装
 * 注入函数, 过滤除数字外的字符
 * */
  <el-input v-model="formData.openGroupPrice"
        @input="handleInput($event,'openGroupPrice')"
        placeholder="请输入优惠价"></el-input>

  handleInput (value, field) {
    if (value != '') {
        if (value.indexOf('.') > -1) {
            // 保留小数点两位小数以及只能输入一位小数点
            let newValue = value.slice(0, value.indexOf('.') + 3)
            this.formData[field] = newValue.replace(/\.{2,}/g, '.')
        } else {
            // 过滤除数字外的字符
            this.formData[field] = value.replace(/^\.+|[^\d.]/g, '')
        }
    }
}