关于elementui table组件 —— 竖向表格

news2024/11/16 9:18:07

前端模拟数据方式:

html代码👇:

<template>
    <el-table :data="tableData" style="width: 60%;margin-top:20px" stripe :show-header="false" border  :row-style="rowStyle">
        <el-table-column prop="title"> </el-table-column>
        <el-table-column prop="name">  </el-table-column> 
    </el-table>
<template/>

 js代码👇:


<script>
export default {
  data() {
    return {
      //表格数据
      tableData: {
        uesId: '',     //部门编号
        keyWord: '',  //关键词
        target: '',   //设计效果
      }
    };
  },
  mounted() {
    const tableData1 = [
      {
        useId: '编号11111',
        keyWord: "关键字关键字关键字关键字关键字关键字关键字关键字关键字关键字",
        target: "设计效果设计效果设计效果设计效果设计效果设计效果设计效果",
      }
    ]
    const tableData2 = [{
      title: "部门编号",
      name: tableData1[0].useId
    },
    {
      title: "关键词",
      name: tableData1[0].keyWord
    },
    {
      title: "设计效果",
      name: tableData1[0].target
    }
    ]
    this.tableData = tableData2

  },
}
</script>

效果图:

 从后端接口获取数据方式:

html代码👇:

<template>
    <el-table :data="tableData" style="width: 60%;margin-top:20px" stripe :show-header="false" border  :row-style="rowStyle">
        <el-table-column prop="title"> </el-table-column>
        <el-table-column prop="name">  </el-table-column> 
    </el-table>
<template/>

js代码👇:

<script>
	export default {
		data() {
			return {
               //表格数据
				tableData: {
					uesId: '',     //部门编号
					keyWord: '',  //关键词
                    target:'',   //设计效果
				}
			}
		},
		methods: {
             //假定这里是接口数据
             getListData( ){ 
              getListData().then((res)=>{
                let resData = res.data
                 const tableData2 = [{
						title: "部门编号",
						name: resData.useId
					},
					{
						title: "关键词",
						name: resData.keyWord
					},
                    {
						title: "设计效果",
						name: resData.target
					}
				]
                 this.tableData = tableData2
              })
             }
		},
	}
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2067389.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

培训第三十五天(容器的基础命令使用)

1、创建一个容器并同时执行echo命令 # 快速启动一个容器执行特定的一次性命令并查看输出结果&#xff0c;输出结果后容器直接退出[rootdocker ~]# docker run -it --namea0 centos:latest echo "abc"abc[rootdocker ~]# docker psCONTAINER ID IMAGE COMMAND …

FreeRTOS 快速入门(六)之互斥量

目录 一、互斥量1、基本概念2、运作机制3、死锁现象4、递归互斥量 二、优先级反转和优先级继承问题1、优先级反转问题2、优先级继承问题 三、互斥量函数1、互斥量1、创建 2、获取互斥量3、释放互斥量4、删除互斥量 一、互斥量 1、基本概念 互斥量又称互斥信号量&#xff08;本…

Vue.js学习笔记(七)使用sortablejs或el-table-draggable拖拽ElementUI的el-table表格组件

文章目录 前言一、el-table-draggable是什么&#xff1f;二、使用步骤1.安装使用2.sortablejs 总结 前言 记录 el-table-draggable 插件使用方法。 一、el-table-draggable是什么&#xff1f; el-table-draggable的存在就是为了让vue-draggable支持element-ui中的el-table组件…

Lesson 81+82 Roast beef and potatoes

Lesson 8182 Roast beef and potatoes 词汇 bath n. 洗澡&#xff0c;浴缸 搭配&#xff1a;have a bath 泡澡 相关&#xff1a;take a shower 淋浴&#xff0c;冲个澡    shower&#xff1a;花洒&#xff0c;喷头 例句&#xff1a;Bobby总是在傍晚洗澡。    Bobby alw…

基于预训练模型,进行氨基酸序列编码,用于深度学习模型构建

本团队提供生物医学领域专业的AI&#xff08;机器学习、深度学习&#xff09;技术支持服务。如果您有需求&#xff0c;请扫描文末二维码关注我们。 在对氨基酸序列数据进行深度学习模型构建时&#xff0c;首先需要将字符形式的序列数据进行编码操作。最简单的当然是One-hot编码…

【Java】/* 双向链式队列 和 循环队列 - 底层实现 */

一、链式队列 1. 使用双向链表实现队列&#xff0c;可以采用尾入&#xff0c;头出 也可以采用 头入、尾出 (LinkedList采用尾入、头出) 2. 下面代码实现的是尾入、头出&#xff1a; package bageight;/*** Created with IntelliJ IDEA.* Description:* User: tangyuxiu* Date: …

[kaggle竞赛] 毒蘑菇的二元预测

毒蘑菇的二元预测 您提供了很多关于不同二元分类任务的资源和链接&#xff0c;看起来这些都是Kaggle竞赛中的参考资料和高分解决方案。为了帮助您更好地利用这些资源&#xff0c;这里是一些关键点的总结&#xff1a; Playground Season 4 Episode 8 主要关注的竞赛: 使用银行…

2024/8/22 英语每日一段

Belgian triathlete Claire Michel ultimately said it was a virus and not bacteria from the water that made her sick after a swim. But Belgium’s Olympic committee said in a statement that it hoped “lessons will be learned” for future Olympics. “We are th…

鸿蒙(API 12 Beta3版)【使用ImageEffect编辑图片】图片开发指导

场景介绍 ImageEffect提供了一系列接口用于图像的编辑。开发者可以通过ImageEffect接口处理不同图像输入类型Pixelmap、NativeWindow、NativeBuffer或Uri&#xff0c;获得滤镜处理效果。 针对ImageEffect&#xff0c;常见的开发场景如下&#xff1a; 通过ImageEffect提供的N…

iOS 18 Beta 7测试版本体验,无新功能,修复已知bug

近日苹果公司发布了iOS 18 beta7版本&#xff0c;版本号22A5346a。那iOS 18beta7版本是否比其他的测试版要更好用呢&#xff1f;以下测试结果仅供果粉参考&#xff0c;一机一况&#xff0c;以个人实际体验为准。 一、日常使用体验 1、App响应非常快&#xff0c;动画过渡时间稍…

【高等代数笔记】线性方程组的解法(三、四、五)

1. 线性方程组的解法 由于这个视频课的分p十分抽象&#xff0c;我还是把一节完整的课学完再发表笔记吧&#xff0c;要不然太零碎了。 接上一篇文章 阶梯形方程组为 { x 1 − x 2 2 x 3 − 1 0 0 \left\{\begin{array}{l} x_{1}-x_{2}2 \\ x_{3}-1 \\ 00 \end{array}\righ…

dll错误修复工具:一键解决系统DLL错误产生的程序问题(新手入门)

dll错误修复工具&#xff0c;主要解决导致Windows系统上程序出错的各种dll相关问题。金舟DirectXDLL一键修复提供了全面的且快速的扫描功能&#xff0c;能够检测出导致程序故障的任何dll错误&#xff0c;并且一键进行修复。 一、什么是dll文件 dll是系统的动态链接库文件&…

6年赚了300亿孙悟空才是真财神!带火文旅、引发装机热潮、搅动A股....这波热度你蹭到了吗?

《黑神话&#xff1a;悟空》上线后一博主连续32小时直播&#xff0c;观看人数超3000万&#xff0c;涨粉近46万&#xff01;该主播个人收益或高达85万元&#xff01;游戏里的36个取景地中&#xff0c;山西独占27个。8月20日&#xff0c;小西天景区出售门票比去年同期增长300%。 …

前端面试题-vue框架

1. 聊聊为什么会出现 React、vue 这样的框架&#xff0c;他们的出现解决了什么问题 用户界面越来越复杂&#xff0c;框架采用声明式的写法&#xff0c;将界面的构建和数据的管理分离出来&#xff0c;大大提升开发效率和维护效率。 &#xff08;1&#xff09;原生JS实现不太方…

如何在Visio中画精准的圆弧,角度标记,弧度标记(已解决)

1、导入 “绘图工具形状” 打开 Visio--》 然后&#xff1a; 点击 绘制工具形状 之后&#xff0c; 在界面会出现 绘制工具形状的选项 如下 本人 使用圆弧 &#xff0c;弧线功能&#xff0c;然后两头增加箭头&#xff0c;实现角度标注&#xff0c;如下

【Qt开发】建立自己的Qt基本类、函数库封装 包括图表、多线程、串口等

【Qt开发】建立自己的Qt基本类、函数库 包括图表、多线程、串口等 文章目录 前言QtCharts绘图继承QObject的QThread多线程QSerialPort串口配置、发送、接收回调函数附录&#xff1a;C语言到C的入门知识点&#xff08;主要适用于C语言精通到Qt的C开发入门&#xff09;C语言与C的…

2024年企业记账最主流的8大财务软件大对比

企业记账的8大主流财务软件&#xff1a;1.合思&#xff1b;2.用友好会计财务软件&#xff1b;3.浪潮云会计&#xff1b;4.金蝶精斗云财务软件&#xff1b;5.Zoho Books&#xff1b;6.管家婆&#xff1b;7.QuickBooks&#xff1b;8.云账房。 对小企业主来说&#xff0c;采用高效…

Linux | 探究C语言文件接口与Linux系统文件接口的区别与联系 | fopen和open的区别与联系

什么是尘土&#xff1f;从大地之肺发出的一声叹息。 - 《阿多尼斯诗集》(阿多尼斯) 2024.8.23 目录 1、C语言IO接口 示例代码&#xff1a;使用 fopen 和 fclose 读写文件 示例1&#xff1a;通过write写文件 示例2&#xff1a;通过read写文件 C语言的标准流&#xff1a;std…

集合及数据结构第十节(上)————优先级队列,堆的创建、插入、删除与用堆模拟实现优先级队列

系列文章目录 集合及数据结构第十节&#xff08;上&#xff09;————优先级队列&#xff0c;堆的创建、插入、删除与用堆模拟实现优先级队列 优先级队列&#xff0c;堆的创建、插入、删除与用堆模拟实现优先级队列 优先级队列的概念堆的概念堆的存储方式堆的创建变量的作…

谷粒商城实战笔记-250-商城业务-消息队列-RabbitMQ安装-Docker

一&#xff0c;docker安装RabbitMq RabbitMQ 是一个开源的消息代理软件&#xff0c;广泛用于实现异步通信和应用程序解耦。 使用 Docker 容器化技术可以简化 RabbitMQ 的安装和部署过程。 以下是使用 Docker 安装 RabbitMQ 的详细步骤。 步骤 1: 安装 Docker 如果您的系统…