首页 > 其他分享 >Element-Plus中表格的使用

Element-Plus中表格的使用

时间:2023-04-25 23:56:57浏览次数:41  
标签:表格 展示 表头 Element Plus 数组 使用 dish

table的使用

基础使用

el-table是整个表格,其中的data是整个列表要展示的数据。一般我们使用表格所展示的内容都是数组嵌套对象的形式,width就是指定整个表格的宽度,也就是基础的css样式。
其中每一列使用el-table-column来包裹,在el-table-column中prop表示数组中每一项元素的建,label则表示表头信息。如果不想展示表头信息,只需要删除掉label,同时设置show-header="false",才会不显示表头。如果没有设置的话,那么表头的空间会留出来。

<el-table-column label="菜品信息" width="420" show-header="false">

如果其中某一列又是一个数组,我们需要在当前的这一个表格中展示一个数组的内容。
数据格式如下:

orderList: [
  {
    id: 1,
    user_name: '张三',
    order_time: '2021-05-01 12:30:00',
    order_total_price: 39.9,
    order_flavor: '微辣',
    dishes: [
      {
        dish_name: '宫保鸡丁',
        dish_count: 1,
        dish_image: 'https://xxx.com/gongbaoji.png' // 设置菜品图片链接
      },
      {
        dish_name: '糖醋排骨',
        dish_count: 2,
        dish_image: 'https://xxx.com/tangcupaigu.png' // 设置菜品图片链接
      }
    ]
  }
]

效果展示如下:
image
就需要对某一列进行具体的设置,使用插槽的方式将当前数组传递到某一单元格中,之后再进行展示

<el-table-column label="菜品信息" width="420" show-header="false">
      <template #default="{ row }">
        <el-table :data="row.dishes" style="width: 100%">
          <el-table-column prop="dish_name" />
          <el-table-column width="200" show-headers="false">
            <template #default="{ row }">
              <el-image :src="row.dish_img" style="width: 80px; height: 80px;" />
            </template>
          </el-table-column>
          <el-table-column prop="dish_count" :formatter="formatDishCount" />

        </el-table>
      </template>
</el-table-column>

因为我这里需要展示图片,所有又加了一个template,将当前的row信息传递过去

对某一个数据进行处理,

在之前的普通form中,我们可以使用v-for进行遍历,并且对每一项所要展示的内容进行操作,在vue2中我们还可以使用过滤器,但是在这里我们无法直接获取到每一行所要展示的具体内容。如果想要进行处理,有两种方法。

  1. 使用map函数,对原始数组进行处理,比如拼接字符串之类的操作,将数组内容拼接成我们想要展示的内容
  2. 使用formmat,比如我们要对菜品数量进行处理,给每一项前面加上x,也就是数量展示为x1,x2这样的形式
<el-table-column prop="dish_count" :formatter="formatDishCount" />

之后在script中写上对应的方法

const formatDishCount = (row: any, column: any, cellValue: string) => {
  console.log(cellValue);
  return `x ${cellValue}`;
}

需要注意的是,这里的第三个参数才是我们要处理的数据。第一个row和第二个column都是一个对象,表示当前行或当前列的一些相关信息。row是一个响应式对象,包含当前行的所有信息

标签:表格,展示,表头,Element,Plus,数组,使用,dish
From: https://www.cnblogs.com/zx529/p/17354382.html

相关文章

  • Element之container容器布局
    作用:用来快速搭建页面基本结构<el-container>:最外层容器标签<el-header>:头部容器标签<el-aside>:侧面容器标签<el-main>:主要内容容器标签<el-footer>:底部容器标签注:以上标签采用的是flex弹性盒布局,本人还是比较喜欢用的(不会的可以去搜索相关教程,还是比较实用的)常见......
  • vue 使用Element 的form表单如何校验对象中的对象属性?
    1、校验对象中的对象属性,需要特殊处理下:<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......
  • D. Remove One Element(前缀最大+简单状态机)
    题目D.RemoveOneElement题意输入n(2≤n≤2e5)和长为n的数组a(1≤a[i]≤1e9)。从a中去掉一个数(也可以不去掉)。输出a的最长严格递增连续子数组的长度。思路一种方法是前缀最长和后缀最长,加起来。这种方法比较简单。用状态机来写,定义f[i][0/1]分别表示前缀......
  • CI Plus简介
    CIPlus简介CIPlus是数字电视机顶盒(STB)和电视(TV)中常用的一种条件接入机制。它通过智能卡(smartcard)对接收机进行认证和授权,使其能接收加密的付费电视节目信号。CIPlus由法国的数字电视行业协会DVB开发,已成为数字电视ConditionalAccess的标准机制,广泛应用于欧洲、中......
  • vue-element-admin报错Error: error:0308010C:digital envelope routines::unsupporte
    安装vue-element-admin报错 nodejs  Node.jsv18.15.0  opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'],library:'digitalenveloperoutines',reason:'unsupported',code:'ERR_OSSL......
  • sqlplus工具迁移数据经验
        需要紧急把测试服务器数据迁移到pc机用于演示,但pc机无网络又没有客户端工具,只能使用sqlplus,且导出得文件又是sql文件,失去工具支持导入共过程遇到很多问题,如乱码问题,sql文件中特殊字符,日志存放和查看,导出文件不能写入,安装过程目录写入权限等大小问题。希望通过这篇博客把......
  • Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法
    【问题描述】在需求开发的过程中遇到了一个奇怪的问题:点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。 【产生原因】查阅资料后得知,当el-form表单里只有一个 el-input时,按下回车建会自动触发页面提交功能,因此导致了页......
  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目
    最后是完整的vite.config.ts、main.ts配置1、先用vite创建一个项目npmcreatevite@latest2、安装elementplusyarnaddelement-plus@element-plus/icons-vuevite.config.ts配置组件按需导入,图标自动导入npminstall-Dunplugin-vue-componentsunplugin-auto-impor......
  • vue3中如何引入element-icon并使用
    简单来说,步骤就是:安装——注册——按需引入——使用安装#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue注册您需要从@element-plus/icons-vue中导入所有图标并进行全局注册。......
  • pandas.DataFrame—构建二维、尺寸可变的表格数据结构
    语法格式pandas.DataFrame(data=None, index=None, columns=None, dtype=None, copy=None)常用的几个参数解释:data:一系列数据,包括多种类型;index:索引值,行标签,默认值为RangeIndex(0,1,2,…,n);columns:列标签,默认值为RangeIndex(0,1,2,…,n);dtype:设置数据......