Vue-ElementPlus 二次封装（可编辑模式）

目录

一、思路：

二、功能点：

三、封装组件：

1、代码 

1.1、capsulation-table  组件

1.2、capsulation-table 所要使用的数据

2、分析

2.1、cancelOtherOptions()方法

四、总结

---

 ElementPlus中的 el-table 中没有编辑模式，所以需要自己封装一下

一、思路：

        通过插槽（具名插槽、作用域插槽一起使用 ）将 el-input 或 el-select 传递给封装的组件，其中 可编辑模式是利用 v-if 切换普通的 div 和 el-input/el-select 组件。

        具名插槽用于 插入位置，并按照名字来识别对应的插槽（插入多个el-input、el-select等）

        作用于插槽用于 让插槽内容能够访问或使用子组件中才有的数据

---

二、功能点：

1. 根据某个属性去决定当前组件是否 可编辑
2. 双击开启编辑模式（可编辑）
3. 开启编辑模式后点击其他位置（其他的el-input或dom），关闭编辑模式 （可编辑）

---

三、封装组件：

1、代码 

1.1、capsulation-table  组件

<template>
  <div class="table-flex">
    <el-table
      ref="tableFlex"
      :data="tableData"
    >
      <template v-for="(col) in tableColumns" :key="col.prop">
        <el-table-column
          :prop="col.prop"
          :label="col.label"
          :show-overflow-tooltip="col.showTooltip"
        >
          <template #default="scope" v-if="col.edit">
            <div
              :class="col.edit + scope.$index + scope.cellIndex"
              @dblclick="