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 表格复选框勾选翻页状态也存在

<el-table
    ref="multipleTables1"
    :data="screenRows"
    tooltip-effect="dark"
    border
    style="width: 100%"
    max-height="260px"
    :row-key="getOpenKey"
    @selection-change="changeFunOpen"
  >
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55"
    />
</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

<el-table :data="tableData" border @row-click="rowClick" style="width: 100%">
     <template v-for="(item, index) in field">
       <el-table-column
         show-overflow-tooltip
         :key="index"
         :prop="item.prop"
         :label="item.label"
         :width="item.width"
       >
       </el-table-column>
     </template>
     <el-table-column
       fixed="right"
       label="操作"
       width="130"
       style="border-left: 1px solid #ebeef5"
     >
       <template slot-scope="scope">
         <el-button
           type="text"
           icon="el-icon-view"
           size="small"
           @click.native.stop="query(scope.row)"
           >查看</el-button
         >
       </template>
     </el-table-column>
</el-table>

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

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

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

<el-input
	 v-model="ruleFormState.stationName"
	 @change="change()"
	 placeholder="请输入名称"
></el-input>
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])
}