vue element table 加 Popover 使用

我这里的操作列包含编辑、重置密码、删除。编辑不带Popover<el-table-column prop="Strcreatetime" label="操作" width="185"><template slot-scope="scope"><span @click="handleCellClick(scope.row)" class="cell-cursor"

Yoga99

712人浏览 · 2021-07-15 10:19:21

Yoga99 · 2021-07-15 10:19:21 发布

我这里的操作列包含编辑、重置密码、删除。编辑不带Popover
在这里插入图片描述

        <el-table-column prop="Strcreatetime" label="操作" width="185">
          <template slot-scope="scope">
            <span @click="handleCellClick(scope.row)" class="cell-cursor" >编辑</span >
            <el-popover
              placement="top"
              width="160"
              :ref="`onpopover-${scope.$index}`" >
              <p>
                确定重置 <b> {{ scope.row.Strusername }}</b> 的密码吗？
              </p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="info"
                  @click="scope._self.$refs[`onpopover-${scope.$index}`].doClose() ">取消</el-button >
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleCellDel(scope.row, 'reset'),
                      scope._self.$refs[`onpopover-${scope.$index}`].doClose() ">确定</el-button >
              </div>
              <span
                class="cell-cursor"
                style="margin-left: 10px;"
                slot="reference">重置密码</span>
            </el-popover>

            <el-popover
              placement="top"
              width="200"
              :ref="`popover-${scope.$index}`"
            >
              <p> 确定删除 <b> {{ scope.row.Strusername }}</b> 用户吗？删除之后不可恢复！  </p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini"  type="info"
                  @click="scope._self.$refs[`popover-${scope.$index}`].doClose() " >取消</el-button >
                <el-button
                  type="danger"
                  size="mini"
                  @click=" handleCellDel(scope.row, 'del'), 
                  scope._self.$refs[`popover-${scope.$index}`].doClose()">删除</el-button >
              </div>
              <span
                class="cell-cursor cell-del"
                slot="reference"
                style="margin-left: 10px;">删除</span >
            </el-popover>
          </template>
        </el-table-column>

 methods: {
    ...mapActions('sys', ['getUserList', 'deleteUserInfo', 'updateResetPwd']),
    
    handleCellClick(row) {
      console.log(row);
    },

    handleCellDel(row, type) {
      const { Strusercode } = row;
      if (type === 'del') {
        let params = { Strusercode };
        this.deleteUserInfo({
          params,
          callback: res => {
            console.log(res);
          }
        });
      } else {
        let params = { Strusercode, struserpwd: '000' };
        this.updateResetPwd({
          params,
          callback: res => {
            console.log(res);
          }
        });
      }
      // console.log(row);
    },
  }

复制即用！如有所帮助记得点赞