Element-Plus中表格的使用

Posted 2023-04-26

table的使用

基础使用

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

<el-table-column label="菜品信息"  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="菜品信息"  show-header="false">
      <template #default=" row ">
        <el-table :data="row.dishes" >
          <el-table-column prop="dish_name" />
          <el-table-column  show-headers="false">
            <template #default=" row ">
              <el-image :src="row.dish_img"  />
            </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 el-table表格组件按行内内容自动添加图片

图片URL写在了表格变量中

scop.row获取当前行的数据

<el-table>
 <el-table-column label="" prop="">
    <template #default="scope">
       <el-image  style="width: 70px; height: 70px" :src="scope.row.site" alt="" :fit="fill" ></el-image>
    </template>
 </el-table-column>
</el-table>