Vue_常被忽略的小技巧（持续更新中）

目录

1、dialog 去除弹出框 遮罩层

2、upload 附件上传 不允许被删除

3、select 下拉框具备 搜索功能

4、treeselect 组件，根据条件 禁用根节点

5、v-selectpage 组件

6、表格中数据过多，用省略号显示

7、解决 有值时仍校验问题

8、后端接口地址存储在localStorage中

9、将表单清空为初始状态

10、动态css样式

11、给数组的每一个对象加一个新字段

12、axios请求接口格式

13、css样式穿透3种方法

14、css颜色渐变

---

1、dialog 去除弹出框 遮罩层

主要代码： 

    :modal-append-to-body="false"

使用举例： 

2、upload 附件上传 不允许被删除

主要代码： 

    disabled

使用举例：  

3、select 下拉框具备 搜索功能

主要代码： 

    filterable

 使用举例：

4、treeselect 组件，根据条件 禁用根节点

使用举例（主要代码 已标注）： 

5、v-selectpage 组件

 如果有类型报错（如：期望是数字型得到的是字符串型）

可以尝试如下：v-model与key-field中的值一致，如果后端给到的值与传给后端的值不一致，可以取一个值作为桥梁（如拿到的id是uniqueId，传给后端的值是personId，因此需要做个转换）

6、表格中数据过多，用省略号显示

主要代码： 

    show-overflow-tooltip

使用举例： 

7、解决 有值时仍校验问题

主要代码： 

      if(node != null){
        this.$refs.formOperation.clearValidate('equipmentType')
      }

使用举例： 

8、后端接口地址存储在localStorage中

主要代码： 

保存数据：
localStorage.setItem("key","value");

读取数据：
var getData=localStorage.getItem("key");

删除数据：
localStorage.removeItem("key");

使用举例： 

9、将表单清空为初始状态

主要代码： 

    clearable

使用举例： 

10、动态css样式

主要代码： 

:style="{ color: totalData.compareWeek > 0 ? '#2EBA07' : totalData.compareWeek < 0 ? '#FE5500' : '#000000' }"

使用举例： 

// 当数据 totalData.compareWeek 大于、等于、小于0时，分别是不同的颜色
<span class="number" 
      :style="{ color: totalData.compareWeek > 0 ? '#2EBA07' : totalData.compareWeek < 0 ? '#FE5500' : '#000000' }">
      根据条件显示不同颜色
</span>

11、给数组的每一个对象加一个新字段

主要代码：

//this.Array为数组名
this.Array.forEach(item => {
　　this.$set(item,'字段名称',字段值)
})

使用举例： 

12、axios请求接口格式

data() {
    return {
      url: "http://190.168.12.55:8070/",
    };
  },
mounted() {
    this.getPictureData();
  },
methods: {
    getPictureData() {
      axios
        .get(this.url + "device/manage/equipmentRecord/id", {
          params: {
            id: this.idData,
          },
        })
        .then((res) => {
          console.log(res)
        });
    },
  },

13、css样式穿透3种方法

• /deep/
• >>>
• ::deep

14、css颜色渐变

主要代码：

// background: linear-gradient(倾斜角度, 颜色, 颜色, 颜色);
background: linear-gradient(45deg, red, blue);