vue的table表格_vue elementui表格

vue的table表格_vue elementui表格新入职的公司让我学习下Vue,以前没怎么学过,最近开始学习,记录下每天学习的内容,借鉴了很多前辈们的资料,如有冒犯,还请原谅。开始我做的是动态表格,但是发现不会调整宽度,于是就改成了下面的样子,用着更舒服一些。先记录下来,免的以后想用找不到。先看下效果图。本人比较懒,就写了一行,下面上代码。<template> <el-table:data=”tableDa…


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

新入职的公司让我学习下Vue,以前没怎么学过,最近开始学习,记录下每天学习的内容,借鉴了很多前辈们的资料,如有冒犯,还请原谅。
开始我做的是动态表格,但是发现不会调整宽度,于是就改成了下面的样子,用着更舒服一些。先记录下来,免的以后想用找不到。
先看下效果图。
在这里插入图片描述
本人比较懒,就写了一行,下面上代码。

<template>
	<el-table
    :data="tableData"
    border
    style="width:95%"
    fit
>
    <el-table-column
        prop="goodsNo"
        label="商品编号"
        width="150"
        align="center"
    >
    </el-table-column>
    <el-table-column
        prop="goodsName"
        label="商品名称"
        show-overflow-tooltip
        align="center"
    >
    </el-table-column>
    <el-table-column
        prop="goodsPrice"
        label="商品价格"
        width="100"
        align="center"
    >
    </el-table-column>
</el-table>
</template>
<script>	
   export default { 
      data(){
      	return{
      	 	tableData:[
 			   {
			        goodsNo:"10005100000123",
			        goodsName:"套餐月费10元,长市漫合一,被叫免费,国内主叫0.15元/分钟",
			        goodsPrice:"¥20.00"
			    }
			]
      		}
         }
  }
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/191258.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • IntelliJ IDEA 第一个 Scala 程序

    IntelliJ IDEA 第一个 Scala 程序

    2021年6月28日
  • js三目运算符多条表达式_递归算法js

    js三目运算符多条表达式_递归算法js表达式Q?A:B在Q求值为TRUE时的值为A,在Q求值为FALSE时的值为B。例如下面判断奇数偶数的例子: varnumbuer=5; if(numbuer%2!=0){ document.write(“该数为奇数”); } else{ document.write(“该数为偶数”); }改写为三元表达式时…

    2022年10月28日
  • Using ZipLib to create a Zip File in C#

    Using ZipLib to create a Zip File in C#System.IO.Compression是.Net2.0里与压缩有关的命名空间,但是使用起来并不是很方便。使用第3方库ziplib可以很方便地进行压缩类的操作。从[1]下载动态库,然后在工程里AddReference,把ICSharpCode.SharpZipLib.dll加进去。在代码来创建一个zip包的例子如下(摘自ziplibsamplecode)…

    2022年7月26日
  • 常用的web前端开发工具有哪些_web前端开发软件工具

    常用的web前端开发工具有哪些_web前端开发软件工具在建设网页时,为了快速、高效地完成任务,通常会使用一些具有代码高亮显示、语法提示等便捷功能的前端开发工具。常用的web前端开发工具有Dreamweaver、Sublime、HBuilder等,具体介绍如下。1、DreamweaverDreamweaver简称DW(中文译为“梦想编织者”),是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的“所见即所得”网页编辑器,2005年被Adobe公司收购。Dw是第一套针对非专业网站建设人员的视觉化网页开发工具,利用它可以轻而易举地制作网页。2、Su

    2022年8月31日
  • 使用reaver命令穷举PIN码破解WPA2-PSK加密的无线网络[通俗易懂]

    使用reaver命令穷举PIN码破解WPA2-PSK加密的无线网络[通俗易懂]【前言】现在的路由器大多都默认用WPA2-PSK方式对无线网络进行加密了,不能再像WEP加密方式那样好破解,使用字典又需要费心费力地整理字典,而且字典破解的效率还慢。所以我们需要更有效率的破解方法。好在现在大多数的路由器都提供WPS功能,通过这个功能,用户可以使用PIN码登录到路由器。但这个PIN码的长度只有8位,而且可能的取值只有11000种(注意,不是10…

    2022年6月4日
  • log4j使用方法_pipe使用教程

    log4j使用方法_pipe使用教程地址:http://www.codeceo.com/log4j-usage.html日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录。在apache网站:jakarta.apache.org/log4j可以免费下载到Log4j最新版本的软件包。一、入门实例1.新建一个JAva工程,导入包log4j-1.2.17.jar,整个…

    2022年9月5日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号