工作遇到的一些小问题

1.el-table表头过长，强制一行显示，超出部分省略号显示。鼠标放上显示全部。

<!-- html部分 -->
<el-table-column  
  :render-header="renderShow"
  show-overflow-tooltip  
  :width="180"
  align="center"
>

// js部分
renderShow(h, data) { // 表头设置图
  var titleText = data.column.label
  if (data.column.label.length > 10) { // 这里设置长度为4
    titleText = data.column.label.slice(0, 10) + '...'
  }
  return h('span', [
    h('el-tooltip', {
      attrs: {
        class: 'item',
        effect: 'dark',
        content: data.column.label,
        placement: 'top'
      }
    }, [  h('span', titleText)  ])
  ])
}

2.列表中 type="selection" 复选框禁止选择。

<el-table-column
    type="selection"
    width="60"
    align="center"
    :selectable="selected"
/>

selected(row, index) {
    if (row.roleId !== 1) return true
    else return false
}

3.导航栏自定义SVG图标根据主题动态变色。

在.svg文件中修改fill参数为：fill="currentColor"

4.table跨分页多选。

在复选框的 <el-table-column> 中添加 :reserve-selection="true"
<el-table> 中必须添加 row-key 属性 

<el-table-column type="selection" width="55" align="left" :reserve-selection="true" />

清空勾选：this.$refs.multipleTable.clearSelection()

5.前端发送接口时，特殊符号处理

• encodeURI / decodeURI ：以UTF-8编码字符串，对这些字符：“ ; , / ? : @ & = + $ ”不做编码。
• encodeURIComponent： 转义除了 A-Z a-z 0-9 - _ . ! ~ * ' ( ) 外的所有字符。
• decodeURIComponent：将已编码 URI 中所有能识别的转义序列转换成原字符。