vue项目遍历el-popover

最新推荐文章于 2024-08-30 15:40:21 发布

蹊仔的盖世英雄

最新推荐文章于 2024-08-30 15:40:21 发布

阅读量1.2k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/qq_26961121/article/details/107089613

版权

vue项目遍历el-popover

<template>
  <div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      size="small"
    >
      <el-table-column label="名称">
        <template slot-scope="{row}">{{ row.name }}</template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-popover
            popper-class="b-r-10"
            placement="bottom-end"
            width="180"
            trigger="click"
            :ref="'popover-' + `${scope.$index}`"
          >
            <p class="text-center">请确定是否删除该数据？</p>
            <div class="text-center">
              <el-button
                type="primary"
                size="mini"
                @click="handleRow(scope.row);scope._self.$refs['popover-' + `${scope.$index}`].doClose()"
              >确定</el-button>
              <el-button
                size="mini"
                @click="scope._self.$refs['popover-' + `${scope.$index}`].doClose()"
              >取消</el-button>
            </div>
            <el-button
              type="text" 
              slot="reference"
            >删除数据</el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-popover
            popper-class="b-r-10"
            placement="bottom-end"
            width="180"
            trigger="click"
            :ref="'popover-' + `${scope.$index}`"
          >
            <p class="text-center">请确定是否删除该数据？</p>
            <div class="text-center">
              <el-button
                type="primary"
                size="mini"
                @click="handleRow(scope.row);scope._self.$refs['popover-' + `${scope.$index}`].doClose()"
              >确定</el-button>
              <el-button
                size="mini"
                @click="scope._self.$refs['popover-' + `${scope.$index}`].doClose()"
              >取消</el-button>
            </div>
            <el-button
              type="text" 
              slot="reference"
            >删除数据</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '数据1'
        },
        {
          id: 2,
          name: '数据2'
        },
        {
          id: 1,
          name: '数据1'
        }
      ]
    };
  },
  methods: {
    handleRow(row) {
      console.log(row)
    }
  }
};
</script>