element组件踩坑记录

1. el-table在做多选时，需要记录已经选择的项，但是每次关闭后，上次选中的项就没有了：

解决方法：可以给el-table绑定row-key属性，用来优化 Table 的渲染；type="selection"列绑定:reserve-selection="true"，在数据更新之后保留之前选中的数据。

          
            ref="multipleTable"
            :data="labelList"
            border
            style="width: 100%"
            row-key="labelStockId"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
              :reserve-selection="true"
            >el-table-column>
          

row-key属性的值为data数据里的唯一值，也可以是函数 :row-key = "getRowKey"

 getRowKey(row) {
      return row.labelStockId;
    }

2. 上面这种方法在只能记录一次表格的选中情况，如果涉及到多个地方使用了上述相同的表格组件，而每个表格的选中情况不相同，则上述方法不再适合：

解决方法：在获取表格数据的时候，使用组件提供的 toggleRowSelection 方法，切换某一行的选中状态，进行多选框的回显，此方法也可实现切换分页时的回显，需要注意的是 使用  toggleRowSelection 方法 必须使用绑定table的原有数据，不可使用传入的参数，否则方法会无效

      outstockLablestock(param).then((res) => {
        if (res.data.code === 10000) {
          this.labelList = (res && res.data && res.data.data.records) || [];
          this.total = res.data.data.total;
          // 已选中项回显
          this.$nextTick(() => {
            const selectList = this.labelList.filter(({ labelId }) => {
              return this.optionLabelList.some(
                (val) => labelId === val.labelId
              );
            });
            selectList.forEach((item) => {
              this.$refs.multipleTable.toggleRowSelection(item, true);
            });
          });
        }
      });

3. 表格数据改变，但页面数据不更新，使用 this.$forceUpdate() 也不管用：

解决方法：给 el-table 绑定 key 值，在需要更新时  this.num++，触发 el-table 的重新渲染

        
          :data="outstockTableData"
          border
          style="width: 100%"
          :key="num"
        >
        

4.如何不走接口，实现el-table 的分页效果：

解决方法：使用 slice 方法对当前页要展示的数据进行截取

          
            ref="multipleTable"
            :data="
              labelList.slice(
                (optionPage - 1) * optionSize,
                optionPage * optionSize
              )
            "
            border
            style="width: 100%"
          >
          
          <el-pagination
            :current-page="optionPage"
            :page-size="optionSize"
            layout="total, sizes, prev, pager, next"
            :total="optionTotal"
            :pager-count="5"
          />

5.在布局时，如果给每一列都加了固定的宽，而table的宽度为100%，会出现多余的线条影响页面效果：

解决方法：给 el-tale 加上一个width，使它的宽度为所有列宽的和

.el-table {
  width: 302px !important;
}
//多的2px为滚动条宽度

6.如何实现双击table单元格，复制单元格内容

安装复制插件 clipboard-polyfill

npm i clipboard-polyfill

   import { writeText } from "clipboard-polyfill/text" // 复制
 
    
      :data="fileListData"
      border
      style="width: 100%"
      @cell-dblclick="cellDblclick"
    >
    
 
    /* 当某个单元格被双击击时会触发该事件(复制内容) */
    cellDblclick(row, column) {
      console.log(row, column);
      let prop = column.property
      if (!prop) {
        return
      }
      let content = row[prop]
      if ([undefined, null, ''].includes(content) || typeof(content) === 'object') {
        return
      }
      writeText(content) // 复制
      Message.closeAll()
      Message.success(`复制成功：${content}`)
    },

7.如何实现tabel表格的单选

    
      :data="fileListData"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
    
 
let selectRowObj = reactive({
  list:[]
})
 
 const handleSelectionChange = (rows) => {
  if (rows.length > 1) {
    multipleTable.value.clearSelection();
    multipleTable.value.toggleRowSelection(rows.pop());
  } else {
    selectRowObj.list = rows.pop();
  }
};

8.设置树形结构table只可展开一级，其他闭合

    
	  :data="tableData"
      row-key="id"
      :tree-props="treeProps"
      :data="fileListData"
      :expand-row-keys="expands"
      @expand-change="toggleRowExpansion"
    >
    
 
let treeProps = {
    hasChildren: "hasChildren",
    children: "children"
  };
const expands = ref([])
 
const toggleRowExpansion = (row, expandedRows) => {
  console.log(row, expandedRows);
  
  // 点击先清空数组 全部合起来
  expands.value = []
  // 点击之前 expandedRows 分为 true / false
  if (expandedRows) {
    // ture 代表展开 false代表闭合
    // 找到父节点一起放进数组
    expands.value.push(String(row.id))
    expands.value.push(String(row.parent_id))
  } else {
    // false 代表要合起来，
    //如果是根节点，根节点的pid不在列表所以无效,就算放进数组也没用
    // 如果是叶子节点 把pid 放进数组 代表只合起自己，当前节点的根节点还是会展开
    expands.value.push(String(row.parent_id))
  }
}

9.如果组件多层嵌套的话（类似递归），子级往父级抛事件或者父级给子级传值时，一定要给每一个嵌套子组件绑定事件和传值变量，否则子级接收不到值或者父级接收不到方法