el-table常用特殊结构展示

在使用Element UI的el-table组件时，可以通过定义特殊的结构来实现一些特殊的需求，例如：

1. 插入图片作为表格头部或尾部：

<template>
  <el-table>
    <el-table-column>
      <!-- 表格头部插入图片 -->
      <template slot="header">
        <img src="your-image-url.png" alt="Header Image">
      </template>
    </el-table-column>
    <!-- 数据列定义 -->
  </el-table>
</template>

2. 插入自定义操作按钮：

<template>
  <el-table :data="tableData">
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- 这里可以插入自定义的按钮，并通过scope.row访问当前行数据 -->
        <el-button size="small" @click="handleClick(scope.row)">按钮</el-button>
      </template>
    </el-table-column>
    <!-- 数据列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据列表
      ]
    };
  },
  methods: {
    handleClick(row) {
      // 处理点击事件
    }
  }
};
</script>

3. 插入复选框：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection"></el-table-column>
    <!-- 数据列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据列表
      ]
    };
  }
};
</script>

4. 插入展开行显示更多数据：

<template>
  <el-table :data="tableData" row-key="id">
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里可以展示更多的数据，通过props.row访问当前行数据 -->
        <p>{{ props.row.additionalData }}</p>
      </template>
    </el-table-column>
    <!-- 数据列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据列表，每个元素需要有一个唯一的id和additionalData属性
      ]
    };
  }
};
</script>

以上代码展示了如何在el-table中插入图片、自定义按钮、复选框和展开行等特殊结构。根据实际需求，可以通过定义el-table-column并使用slot来插入自定义内容。