vue+elementui 常见问题汇总

1、 解决element表格动态添加时，操作栏的边框线消失的问题

在这里插入图片描述

.el-table__header {
  th:not(.is-hidden):last-child {
    right: -1px;
  }
}
.el-table__row {
  td:not(.is-hidden):last-child {
    right: -1px;
  }
}

2、解决vue-admin-template 下载的svg做为路由的icon时，大小不一致的问题

在这里插入图片描述

// svg
#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
  margin-left: 19px !important;
}
#app .sidebar-container .svg-icon {
  margin-right: 12px !important;
}
.svg-icon {
  width: 18px !important;
  height: 18.4px !important;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3、获取接口返回的响应标头里的信息

在这里插入图片描述

decodeURI()　　//解码一个URI中的字符
decodeURI()　　//解码一个URI中的字符

decodeURI(escape(res.headers['x-total-count']))

4、el-table 表格复选框勾选翻页状态也存在

    


// 指定一个key标识这一行的数据
 getOpenKey(row) {
   return row.id
 },
 // 获取勾选
 changeFunOpen(val) {
   this.checkOpen = []
   this.checkOpen = val
 },
axios(){
     //清空之前选择的数据
    this.$refs.multipleTables1.clearSelection();
}

5、vue blob下载文件

export function getDown(params) {
  return request({
    url: "/blj-v1/bill/download",
    method: "get",
    params,
    responseType: "arraybuffer", // 或者responseType: 'blob'
    // xsrfHeaderName: 'Authorization',
  });
}
down(val) {
     getDown({
       id: val.id,
       filename: val.code
     })
       .then((res) => {
         if (res.status == 200) {
           const data = res.data
           const blob = new Blob([data], { type: 'blob' })
           // 文件后缀一定要加上
           const fileName =
             val.code +
             '-' +
             val.workUser.name +
             '-' +
             val.station.stationName +
             '.json'
           saveAs(blob, fileName)
           this.$message({
             message: '文件下载成功！',
             type: 'success'
           })
         }
       })
       .catch((err) => {
         console.log(err)
       })
    },

6、el-table 行点击事件，操作列不触发行点击事件

• 行事件触发 @row-click
• 按钮不向上冒泡触发行点击事件 @click.native.stop

     
     
       
     


rowClick (row, column) {
      this.query(row)
 },

7、解决e-input框不能输入的问题

• 标签嵌套太深，导致无法获取到 DOM

change() {
  this.$forceUpdate() // 强制刷新
},

8、谷歌浏览器：Added non-passive event listener to a scroll-blocking 'touchmove' event. Con

• 出现场景：使用el-form校验表单

// 安装插件
npm install -S default-passive-events
// 在main.js引入
import 'default-passive-events'

9、

const arrs = rows.map((item) => {
  const data = this.citiesList.find((i) => item.scanId == i.id)
  return {
    ...item,
    ...data,
    name: data ? data.name : []
  }
})
for (let i = 0; i < arrs.length; i++) {
  if (arrs[i].billId == '1') {
    this.checkedCities.push(arrs[i].name)
  }
  this.cities.push(arrs[i])
}