（Vue）调用接口引用elementUI表格显示

最新推荐文章于 2023-03-31 16:50:14 发布
最新推荐文章于 2023-03-31 16:50:14 发布
阅读量2.2k 收藏 10
点赞数 4
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42453890/article/details/116993718
版权

1.下载elementUI

npm i element-ui -S

2.在main.js中使用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.创建table

<el-table
          :data="tableData"
          :height="tableHeight"
          :header-cell-style="{color:'#fff',background:'rgba(35,205,253,0.1)'}"
          :cell-style="{color:'#fff'}"
        >
          <el-table-column prop="id" label="编号" min-width="5%"></el-table-column>
          <el-table-column prop="sname" label="服务名称" min-width="15%"></el-table-column>
          <el-table-column prop="surl" label="接口地址" min-width="12%"></el-table-column>
          <el-table-column prop="sdescription" label="功能描述" min-width="10%"></el-table-column>
          <el-table-column prop="sinput" label="输入描述" min-width="12%" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="soutput" label="输出描述" min-width="12%"></el-table-column>
          <el-table-column prop="sinstance" label="调用示例" min-width="10%" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="srequest" label="请求方式" min-width="5%"></el-table-column>
          <el-table-column prop="senable" label="状态" min-width="5%"></el-table-column>
</el-table>

其中<el-table-column></el-table-column>是每一列

prop：对应接口中的名称
label：表头的名称
min-width：按照百分比设定该列宽度（设置width可能没有效）

4.调用接口

  data () {
      return {
      	tableData: [],
    }
  },

getAjaxData() {
      this.tableData = [];
      var that = this;
      $.ajax({
        type: "get", 
        async: true,
        url:"*************************",//接口地址
        data: "",
        dataType: "json", 
        crossDomain: true,
        success: function(res){
          console.log(res);
          $.each(res, function (i, val) {
            that.tableData.push(res[i]);
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.log("请求对象XMLHttpRequest: " + XMLHttpRequest.status);
          console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
          console.log("错误类型textStatus: " + textStatus);
          console.log("异常对象errorThrown: " + errorThrown);
        }
      });
    },  //获取接口数据

created () {
    this.getAjaxData();
  }

接口格式：
在这里插入图片描述
———————————————————————————————————————

（1）表格中内容太长（显示tooltip）

show-overflow-tooltip=“true”

<el-table-column 
	prop="sdescription" 
	label="功能描述" 
	min-width="10%" 
	:show-overflow-tooltip="true">
</el-table-column>

在这里插入图片描述 在这里插入图片描述

（2）tooltip换行
<el-table-column prop="sinput" label="输入描述" min-width="12%">
     <template slot-scope="scope">
       <el-tooltip
         :disabled="scope.row.sinput === '' "
         placement="top"
         effect="dark">
         <div slot="content" style="width: auto;overflow-x: auto;"
              v-for="item in ((scope.row.sinput || '').split(';'))">{{ item }}</div>
         <ul  class="name-wrapper" style="cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
           <li v-for="item in ((scope.row.sinput || '').split(','))" style="text-align: left">{{ item }}</li>
         </ul>
       </el-tooltip>
     </template>
</el-table-column>

在这里插入图片描述

（3）tooltip按原格式显示json数据
<el-table-column prop="sinstance" label="调用示例" min-width="12%">
   <template slot-scope="scope">
     <el-tooltip
       :disabled="scope.row.sinstance === '' "
       placement="top"
       effect="dark">
         <div slot="content" style="width: auto;height:500px;overflow-x: auto;"><pre><code>{{ scope.row.sinstance }}</code></pre></div>
         <ul  class="name-wrapper" style="cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
           <li v-for="item in ((scope.row.sinstance || '').split(','))" style="text-align: left">{{ item }}</li>
         </ul>
     </el-tooltip>
   </template>
</el-table-column>

在这里插入图片描述

（4）根据接口数据显示不同内容
<el-table-column prop="senable" label="状态" min-width="5%">
   <template slot-scope="scope">
     {{ enable[scope.row.senable] }}
   </template>
</el-table-column>

data () {
    return {
      enable: {
        F: '1',
        T: '2',
      }
    }

在这里插入图片描述 在这里插入图片描述

（5）根据接口数据返回不同图片
<el-table-column prop="senable" label="状态" min-width="5%">
   <template slot-scope="scope">
     <el-image
       class="table-td-thumb"
       :src="require('../../static/ps/'+scope.row.senable+'.png')"
     ></el-image>
   </template>
</el-table-column>

如果需要点击图片放大显示，添加下面这一行

:preview-src-list="[require('../../static/ps/'+scope.row.senable+'.png')]"

在这里插入图片描述

（6）滑块滚动条样式
.treeScrollbar::-webkit-scrollbar-thumb {
    background-color: #409EFF!important;
    background-clip: padding-box;
    min-height: 28px;
    border-radius: 8px;
  }

  .treeScrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #409EFF;
  }

  *::-webkit-scrollbar {width:10px; height:10px; background-color:transparent!important;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  *::-webkit-scrollbar-track {width:10px; height:10px;background-color:#f0f6ff;  } /*定义滚动条轨道 内阴影+圆角*/
  *::-webkit-scrollbar-thumb {background-color:#409EFF;} /*定义滑块 内阴影+圆角*/
  .scrollbarHide::-webkit-scrollbar{display: none}
  .scrollbarShow::-webkit-scrollbar{display: block}

在这里插入图片描述

（7）表格每一行高
<el-table :row-style="rowStyle"></el-table>        

methods: {
    rowStyle(){
      return{
        height:"100px"
      }
    },
  },

———————————————————————————————————————

代码：
<template>
  <el-container class="container" direction="vertical">
      <el-main class="user_skills" >
        <div style="height: 70px"></div>
          <el-table
            :data="tableData"
            :height="tableHeight"
            :header-cell-style="{color:'#fff',background:'rgba(35,205,253,0.1)'}"
            :cell-style="{color:'#fff'}"
            :row-style="rowStyle"
          >
            <el-table-column prop="id" label="编号" min-width="4%"></el-table-column>
            <el-table-column prop="sname" label="服务名称" min-width="12%"></el-table-column>
            <el-table-column prop="surl" label="接口地址" min-width="12%"></el-table-column>
            <el-table-column prop="sdescription" label="功能描述" min-width="10%" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="sinput" label="输入描述" min-width="12%">
              <template slot-scope="scope">
                <el-tooltip
                  :disabled="scope.row.sinput === '' "
                  placement="top"
                  effect="dark">
                  <div slot="content" style="width: auto;overflow-x: auto;"
                       v-for="item in ((scope.row.sinput || '').split(';'))">{{ item }}</div>
                  <ul  class="name-wrapper" style="cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                    <li v-for="item in ((scope.row.sinput || '').split(','))" style="text-align: left">{{ item }}</li>
                  </ul>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="soutput" label="输出描述" min-width="12%" >
              <template slot-scope="scope">
                <el-tooltip
                  :disabled="scope.row.soutput === '' "
                  placement="top"
                  effect="dark">
                  <div slot="content" style="width: auto;overflow-x: auto;"
                       v-for="item in ((scope.row.soutput || '').split(';'))">{{ item }}</div>
                  <ul  class="name-wrapper" style="cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                    <li v-for="item in ((scope.row.soutput || '').split(','))" style="text-align: left">{{ item }}</li>
                  </ul>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="sinstance" label="调用示例" min-width="12%">
              <template slot-scope="scope">
                <el-tooltip
                  :disabled="scope.row.sinstance === '' "
                  placement="top"
                  effect="dark">
                    <div slot="content" style="width: auto;height:500px;overflow-x: auto;"><pre><code>{{ scope.row.sinstance }}</code></pre></div>
                    <ul  class="name-wrapper" style="cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                      <li v-for="item in ((scope.row.sinstance || '').split(','))" style="text-align: left">{{ item }}</li>
                    </ul>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="srequest" label="请求方式" min-width="8%"></el-table-column>
            <el-table-column prop="senable" label="状态" min-width="5%">
              <template slot-scope="scope">
                <el-image
                  class="table-td-thumb"
                  :src="require('../../static/ps/'+scope.row.senable+'.png')"
                  :preview-src-list="[require('../../static/ps/'+scope.row.senable+'.png')]"
                ></el-image>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
    </el-container>
</template>

<script>
import $ from 'jquery';
export default {
  name: 'Table',
  data () {
    return {
      tableHeight: window.innerHeight - 180,

      tableData: [],

    }
  },
  components: {
  },

  methods: {
    getAjaxData() {
      this.tableData = [];
      var that = this;
      $.ajax({
        type: "get", //get post
        async: true,
        url:"*********************",
        data: "",
        dataType: "json",
        crossDomain: true,
        success: function(res){

          console.log(res);
          $.each(res, function (i, val) {
            that.tableData.push(res[i]);
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.log("请求对象XMLHttpRequest: " + XMLHttpRequest.status);
          console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
          console.log("错误类型textStatus: " + textStatus);
          console.log("异常对象errorThrown: " + errorThrown);
        }
      });
    },  //获取接口数据
    rowStyle(){
      return{
        height:"100px"
      }
    },
  },
  created () {
    this.getAjaxData();
  }
}
</script>

<style scoped>
  .container{
    background-repeat: no-repeat;
    background-position: center center;
    background-size:100% 100%;
    position:relative;
  }
  .user_skills{
    position: relative;
  }
  /*.user_skills /deep/ .el-table--fit{*/
    /*padding: 0px;*/
  /*}*/
  .user_skills /deep/  .el-table, .el-table__expanded-cell, .el-table-column {
    background-color: transparent!important;
    text-align: center!important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td {
    color: #fff;
    background-color: #a2a4a7!important;
  }
  .el-table__body tr.current-row>td {
    background-color: transparent!important;
  }



</style>

<style>
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 30px;
    line-height: 30px;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color:transparent;
    color:#23CDFD!important;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent!important;
  }
  .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
    background-color: transparent!important;
  }
  .el-menu-item.is-active {
    color: #fff !important;
    background: #409EFF !important;
  }
  .el-table__row>td{
    border: #409EFF!important;
  }
  .treeScrollbar::-webkit-scrollbar-track-piece {
    background-color: #fff!important;
  }

  .treeScrollbar::-webkit-scrollbar {
    width: 100px;
    height: 10px;
  }
  .el-scrollbar__bar {
    opacity: 1;
  }

  .treeScrollbar::-webkit-scrollbar-thumb {
    background-color: #409EFF!important;
    background-clip: padding-box;
    min-height: 28px;
    border-radius: 8px;
  }

  .treeScrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #409EFF;
  }

  *::-webkit-scrollbar {width:10px; height:10px; background-color:transparent!important;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  *::-webkit-scrollbar-track {width:10px; height:10px;background-color:#f0f6ff;  } /*定义滚动条轨道 内阴影+圆角*/
  *::-webkit-scrollbar-thumb {background-color:#409EFF;} /*定义滑块 内阴影+圆角*/
  .scrollbarHide::-webkit-scrollbar{display: none}
  .scrollbarShow::-webkit-scrollbar{display: block}


</style>

在这里插入图片描述
样式上如果不太一致因为还改了elementUI里面index.css文件，忘了改了哪些了把最后的文件发出来吧…

链接：https://pan.baidu.com/s/1AEx8pTG9SU78366P4czAdw
提取码：1234
复制这段内容后打开百度网盘手机App，操作更方便哦

路径是这个

\node_modules\element-ui\lib\theme-chalk\index.css

嘿Dorothy
关注
专栏目录
【Vue&ElementUI学习】axios获取后端数据并展示到页面
m0_55126564的博客
03-30 2009
效果图： 1. main.js import axios from 'axios' Vue.prototype.axios = axios 2.sim.vue <script> export default { name: 'Sim', beforeRouteEnter: (to, from, next) => { console.log('进入SIM页面') next(vm => { vm.getData.
vue显示mysql_element+vue显示数据库数据
weixin_42442019的博客
02-10 1189
App.vue部门统计统计项class="el-menu-vertical-demo"background-color="#545c63"text-color="#fff":default-openeds="defaultOpen"@open="handleOpen"active-text-color="#ffd04b">BUG排行榜appearappear-active-class="an...
Vue通过接口获取数据在列表展示
zengxingyuluo的博客
04-23 6854
1、引入JS <!--bootstrap--> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/bootstrap/3...
vue-Element-axios搭建调用api进行数据展示
weixin_30391339的博客
09-19 976
1全局安装vue-cli 输入命令：npm install vue-cli -g 2创建项目框架 输入命令：vue init webpack vueapi 3依次按照提示输入，项目名、项目描述、项目作者等等， 4.进入vueapi目录 输入命令： cd vueapi 5.安装element-ui 输入命令：npm i element-ui -S...
Element 调用接口
吕小布布布的博客
03-05 7054
博主前面的文章已经为大家讲了Element入门教程，相信大家对Element 框架已经有了一个基本的了解，这次为大家讲一下如何调用接口。 以我自己为例子，我想要调用我接口里的图片，并让他在浏览器里显示出来。 打开自己的element-starter文件夹，在src目录下新建一个Login文件夹，在里面新建一个Index.vue文件。 代码如下： &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt...
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
联系人的增删改查操作可以通过监听用户交互，调用Vue实例的方法，对保存在`localStorage`中的数据进行操作。 总的来说，利用Vue.js、Vue Router和Element UI构建通讯录应用，可以使开发流程更简洁，界面设计更美观...
浅谈Vue render函数在ElementUi中的应用
10-18
Element UI是Vue.js的一个组件库，提供了许多预定义的UI组件，比如按钮、表单、表格等，以便快速构建界面。render函数在Vue.js中扮演着重要的角色，它允许开发者以编程的方式创建虚拟DOM。本文通过一个实际例子，...
vue+element实现sku表格
02-12
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU（Stock Keeping Unit）表格。Vue.js是一个轻量级、高性能的前端开发框架，而Element UI则是一套为开发者、设计师和产品经理...
vue 简单实用的elementUI表格封装
Start2019
07-23 2810
只需要了解slot组件就可以了。例举了两种表格：普通表格的写法，带操作按钮的报个写法
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
在我们的个人信息提交表格显示Demo中，Element UI的表格组件将发挥关键作用。我们可以用`<el-table>`标签来创建表格，并通过`<el-form>`和`<el-form-item>`组合实现表单输入。 要创建一个个人信息提交的表格，首先...
vue-DBM:vuejs数据库管理器数据管理系统-前端
03-11
注意！此项目已重建，当前版本为2.0，老版本请查看下载1.0版本 说明 DBM是一个数据源管理系统，包含数据源管理，开放授权两个模块，数据源管理指关系型数据的一键导入，按需筛选，指定转换等功能，开放授权指数据拥有者给用户开放数据的增，删，改，查等操作权限。部署或使用此系统可以给你的前端项目带来数据持久化的功能，而不再是数据模拟。 DBM前端是使用vue-cli脚手架构建的一个SPA应用，主要依赖于与 ，因此要让前一步分离更彻底，前端在开发时将根据与相应商定的接口协议使用Mockjs模拟响应，在转换完成接口编写后使用不同的启动驱动程序转换接口完成整个系统的测试。 如果您也想使用vue.js结合后台语言（nodejs，java等）开发一个带前逐步的完整应用的话，参考DBM前端工程的实现也许能够帮您解决以下问题 如何提高组件的附加性？ 如何使用状态管理中的多模块？ 如何实现页面级，元素级的权限
vue+elementui 增删改（调接口）
最新发布
CMDN123456的博客
03-31 397
vue+elementui 增删改
vue Element-ui中el-table拼接接口返回的数组的数据并展示
Fxhani的博客
05-07 5837
需要的效果显示 ???? 需要的效果就是展示成这样，这是从后台取出的数据： 这是使用的table表格组件，一级菜单数据渲染没有问题，二级菜单就是两个列表（第一张图片标红的地方）渲染的时候不能实现 解决方法 ???? <el-table v-loading="listLoading" :data="list" element-loading-text="数据加载中"...
vue中表单中的数据添加到表格中
m0_58451019的博客
10-11 3984
通过vue中的表单数据添加到表格中
Vue——get调用后端接口并将数据回显到table中
热门推荐
HoShining日志
10-10 1万+
get带参数 呈现效果（动态获取后台数据） 1.HTML < template> <el-table :data="tableData"> //这里的tableData在2.script -> export default -> data -> return 中定义 <el-table-column prop="taskName" label="项目名称"> </el-table-column&gt
Vue 与 ajax连用，调用显示数据库数据
小白
03-31 1887
数据库内容在前端显示为 与vue二位数组相似 [{"name":"aaa","id":999}] 所以可以用vue与Ajax来显示数据库内容，格式如下： <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>Vue</title> <script src=
Vue显示数据：Vue+PHP+Mysql
soos的博客
06-14 1631
vue请求后端数据
elementui表格如何根据后台返回的数据进行有效显示
阿小绿的博客
03-28 2992
如何根据后台返回的数据进行有效显示。 <!-- :data="projectInfoList" 绑定表格数据 @selection-change="handleSelectionChange" 当我勾选了以后触发handleSelectionChange事件 --> <el-table ref="DataTable" v-loading="loading" :data="projectInfoList" @selection-change="handleSelectionChange"
vue2项目有搜索接口和全部数据展示接口，elementui分页需要判断条件分别调用接口
weixin_69677630的博客
12-08 478
vue2项目有搜索接口和全部数据展示接口，elementui分页需要判断条件分别调用接口
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值