vue后台系统遇到的一些问题

1.element ui dialog进行表单的验证会出现只进行一次表单校验

解决方案：添加close事件和open事件在关闭弹窗之后执行this.$refs['form'].resetFields();命令

 getOpen() {
      // 移除校验状态
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });

这里面的 ‘form’ 就是表单设置的ref的值，通过这种方法，就能在提交表单、关闭表单的时候自动重置表单

2.element ui dialog进行表单的验证可能会得不到valid值导致确定按钮无法进行表单校验

解决方案：将element ui dialog变成单独组件进行使用

3.字符串想通过符号进行分割成数组

解决方案：直接使用split(),如：通过逗号分隔字符串成数组split(",")

4.需要表格有滚动条，页面没滚动条

解决方案：给表格设置vh视觉高度

5.对于antv图表使用不够熟练

解决方案：对官网api文档仔细阅读

6.数组查找指定元素的几种方法

7.input表单进行数据修改有时候不刷新

解决方案：this.$forceUpdate()

8.elementUI树结构Tree修改每行高度

解决方案：

.el-tree-node__content {

  height: 40px;

}

9.elementUI输入框修改高度

解决方案：

 .el-input__inner {

  height: 30px;

  margin-bottom: 5px;

}

10.修改组件样式要用深度选择器

深度选择器::v-deep比较通用

11.Vue Error：[ElTable] prop row-key is required

解决方案：element-ui表单选择了多选，需要在el-table上添加:row-key=“id”

12.Vue.js前台报Uncaught (in promise) cancel错误解决办法

解决方案：this.$confirm方法内置promise方法，所以不能把.catch()去掉（因为取消操作时，无法捕获）

13.解决el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题

  <el-input
         v-model="form.currentPayAmount"
          @blur="form.currentPayAmount = $event.target.value"
          @input="input($event)"
        >
  </el-input>

14.解决element-ui table表格两行或者更多行才出现提示框的问题

//html
 <el-tooltip
              placement="top"
              v-model="scope.row.showTooltip"
              v-if="scope.row.schedulePoints[0].moduleName != ''"
              :open-delay="500"
              effect="dark"
            >
              <div slot="content">
                [{
   
   { scope.row.schedulePoints[1].moduleName }}]-[{
   
   {
                  scope.row.schedulePoints[1].className
                }}{
   
   { scope.row.schedulePoints[1].classNumber }}]
              </div>
              <div
                @mouseenter="showTips($event, scope.row, scope.$index)"
                class="curse"
                v-if="scope.row.schedulePoints[1].moduleName != ''"
              >
                [{
   
   { scope.row.schedulePoints[1].moduleName }}]-[{
   
   {
                  scope.row.schedulePoints[1].className
                }}{
   
   { scope.row.schedulePoints[1].classNumber }}]
              </div>
            </el-tooltip>

//js
 showTips(obj, row, index) {
      /*obj为鼠标移入时的事件对象*/

      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("span");
      TemporaryTag.innerText = `[ ${row.schedulePoints[0].moduleName} ]-[${row.schedulePoints[0].className}${row.schedulePoints[0].classNumber} ]`;
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;
      console.log("currentWidth" + currentWidth);
      console.log("cellWidth" + cellWidth);
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      if (currentWidth >= 2 * cellWidth) {
        row.showTooltip = true;
      } else {
        row.showTooltip = false;
      }
    },

//css
.curse {
  width: 100%;
  text-align: left;
  font-size: 16px;
  color: #1c2438;
  font-weight: 500;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

15.在使用对象的键值为其他数组对象时

对象名[其他数组对象.值]

16.element-ui的描述列表的使用主要用来对齐一些数据。

vue后台系统遇到的一些问题

猜你喜欢