526互联

Element-Plus中表格的使用

发布时间 2023-04-25 23:46:43作者: 含若飞

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是一个响应式对象，包含当前行的所有信息