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>

GitHub 加速计划 / eleme / element
11
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:9 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐