在动态表格中使用el-popver实现类似与el-select

碰见的问题：

1.使用el-popover的trigger="manual"手动激活导致弹框卡顿；最终使用trigger="click"激活；但页面设置disable时点击之后弹框依旧会弹出，可使用css进行隐藏，修改el-popover的样式不能写在scoped里面；解决方法如下

<style>
.disable_popover[x-placement^='bottom']{
  display: none;
}
</style>

2.我的页面是dialog弹框，滚动时，el-popover会固定住不跟随页面滚动，解决方法如下：

注：因为是在table表格中进行使用，所以在绑定ref时要加上下标让其唯一

 （1）.进入页面监听页面的滚动事件

   document.addEventListener('scroll', this.handleScroll, true)

   // 解决popover组件可以跟随滚动条进行滚动
    handleScroll () {
      if (this.$refs['popover' + this.currentPopoverIndex]) {
        this.$refs['popover' + this.currentPopoverIndex].updatePopper()
      }
    },

（2）.关闭弹框页面销毁监听

 document.removeEventListener('scroll', this.handleScroll, true)

3.表格如果有被固定列，el-popover会弹出多个，查找了很多解决方法，目前暂未解决，我这里将固定列取消了

---

（1）布局

 <el-form
      :model="dataForm"
      size="mini"
      ref="dataForm"
      v-loading="loading"
      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
      style="padding:0 30px"
    >
 <el-table
          :data="dataForm.teamSkxqDTOList"
          border
          style="width: 850px;margin-left:25px;margin-bottom:20px;border-radius:3px"
          height="350px"
          size="mini"
        >
  <el-table-column
            prop
            label="本校社团教师"
            align="center"
            :min-width="500"
          >
            <template slot-scope="scope">
             //使用el-select
              <el-form-item v-if="loginType !== '2'">
                <el-select
                  v-model="scope.row.skjsArr"
                  placeholder="请选择教师"
                  style="width:450px; max-width: initial;text-align:left"
                  filterable
                  multiple
                  size="mini"
                  @change="changeSKLS(scope.$index)"
                >
                  <el-option
                    size="mini"
                    v-for="item in sklsList"
                    :key="item.id+scope.$index"
                    :label="
                      item.realName +
                        (item.mobile && item.mobile !== ''
                          ? '(' + item.mobile + ')'
                          : '')
                    "
                    :value="{ value: item.id, label: item.realName }"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
             //使用el-popover（原因：解决企业微信通讯录姓名展示）
              <el-form-item v-if="loginType === '2'">
                <!-- 下拉框 -->
                <div class="div_popover_style">
                  <el-popover
                    placement="bottom"
                    width="400"
                    trigger="click"
                    :popper-class="disabled?'disable_popover':''"
                     :ref="'popover'+scope.$index"
                  >
                    <div class="el-popper_style">
                      <div
                        v-for="(ele, index) in moreObj.data"
                        :key="index + 'list'"
                        @click.stop="selectItem(ele, scope.$index)"
                        :class="ele.state ? 'select_skls_ok' : 'select_skls_no'"
                      >
                        <ww-open-data type="userName" :openid="ele.realName"></ww-open-data>
                        {{
                          ele.mobile && ele.mobile !== ""
                            ? "(" + ele.mobile + ")"
                            : ""
                        }}
                      </div>
                    </div>
                    <!-- 显示框 -->
                    <div
                      @click="!disabled? openPopover(scope.row, scope.$index):''"
                      :class="[
                        'div_input_style',
                        disabled ? 'disabled_div_input_style' : '',
                      ]"
                      slot="reference"
                    >
                      <div
                        v-for="(item, index) in scope.row.skjsArr"
                        :key="index + 'js'"
                        @click.stop
                      >
                        <ww-open-data type="userName" :openid="item.realName"></ww-open-data>
                        {{
                          item.mobile && item.mobile !== ""
                            ? "(" + item.mobile + ")"
                            : ""
                        }}
                        <span
                          class="el-icon-error"
                          v-if="!disabled"
                          @click.stop="deleteItem(item, scope.row, index)"
                        ></span>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </el-form-item>
            </template>
          </el-table-column>
<el-table>
</el-form>

（2）js

methods：{
init(){
   document.addEventListener('scroll', this.handleScroll, true)
},
 openPopover (item, index) {
      this.currentPopoverIndex = index
      this.moreObj.data = []
      this.moreObj.data = JSON.parse(JSON.stringify(this.sklsList))
      if (item.skjsArr.length > 0) {
        this.moreObj.data.forEach((ele) => {
          item.skjsArr.forEach((v) => {
            if (ele.id === v.id) {
              ele.state = true
            }
          })
        })
      }
},
   selectItem (item, index) {
      item.state = !item.state
      let arr = this.moreObj.data.filter((ele) => ele.state)
      this.dataForm.teamSkxqDTOList[index].skjsArr = arr
    },
 deleteItem (item, row, index) {
      item.state = false
      row.skjsArr = row.skjsArr.filter((ele) => ele.state)
    },
 closeDialog () {
      this.visible = false
      document.removeEventListener('scroll', this.handleScroll, true)
    },
    // 解决popover组件可以跟随滚动条进行滚动
    handleScroll () {
      if (this.$refs['popover' + this.currentPopoverIndex]) {
        this.$refs['popover' + this.currentPopoverIndex].updatePopper()
      }
    },
}

（2）css样式

<style lang="scss" scoped>
/deep/ .el-select__tags {
  max-width: initial;
}
.div_input_style {
  min-height: 30px;
  width: 400px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  > div {
    box-sizing: border-box;
    border-color: transparent;
    margin: 2px 0 2px 6px;
    background-color: #f0f2f5;
    height: 20px;
    line-height: 19px;
    padding: 0 5px;
    border-radius: 4px;
    color: #909399;
    font-size: 12px;
    flex-shrink: 0;
  }

  .el-icon-error {
    color: #c0c4cc;
    margin-left: 5px;
      cursor: pointer;
  }
}
.disabled_div_input_style {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
.select_skls_ok,
.select_skls_no {
  height: 34px;
  line-height: 34px;
  cursor: pointer;
}
.select_skls_ok {
  color: #16ab9c;
  position: relative;
}
.el-popper_style {
  overflow: auto;
  max-height: 200px;
}
.select_skls_ok:hover,
.select_skls_no:hover {
  background-color: #f5f7fa;
}
.select_skls_ok::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\E611";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

</style>

(4)效果：