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' // 设置菜品图片链接
}
]
}
]
效果展示如下:
就需要对某一列进行具体的设置,使用插槽的方式将当前数组传递到某一单元格中,之后再进行展示
<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中我们还可以使用过滤器,但是在这里我们无法直接获取到每一行所要展示的具体内容。如果想要进行处理,有两种方法。
- 使用map函数,对原始数组进行处理,比如拼接字符串之类的操作,将数组内容拼接成我们想要展示的内容
- 使用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