vue2 +element ui点击弹窗展示表格

最新推荐文章于 2024-08-29 10:04:34 发布

有志青年₍•ʚ•₎

最新推荐文章于 2024-08-29 10:04:34 发布

阅读量627

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/m0_55915640/article/details/139976410

版权

1.<template>部分


<template>
 <el-button  v-if="dbLevel=='2'" type="primary" size="small" @click="examine">查看</el-button>
 <!-- 查看时候的弹出层 -->
 <el-dialog  :visible.sync="dialogFormVisible" width="500px" top="200px">
     <el-table :data="tableList" style="width: 100%; margin-bottom: 0px; border: 1px solid #e9e9e9" border stripe>
          <el-table-column prop="id" label="id" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="Name" label="单位" align="center" :show-overflow-tooltip="true"></el-table-column>
        <template slot="empty">
          <div class="noCart">暂无数据</div>
        </template>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
</template>

2.js部分

<script>
import { getdataorganizationId } from '@/api/list'

export default {
  data() {
    return {
   tableList: [], // 这里要求 tableData 是一个数组
   dialogFormVisible: false,//弹出层默认为关闭
}},
 methods: {
 examine() {
      this.dialogFormVisible = true; // 打开对话框
      this.handleSet(); // 获取数据
    },
handleSet() {
  var params = {
    organizationId: this.dbLevelid
  };
//返回数据需要是数组格式，进行对象转化数组的操作
  getdataorganizationId(params).then(
    res => {
      console.log(res, 'API 返回数据');
      this.tableList = [{
        id: res.data.id,
        Name: res.data.Name,
      }];
    }
  ).catch(error => {
    console.error('获取数据失败：', error);
  });
}}

</script>