elementplus Table表格中使用template插槽

Element Plus 是一个基于 Vue 3 的组件库，其中 Table 组件提供了灵活的插槽（slot）功能，允许用户自定义表格的特定部分。template 插槽是 Element Plus Table 组件中用于自定义模板的插槽类型之一。

在 Element Plus 的 Table 组件中，你可以通过 `scoped-slot` 属性来定义插槽，并在其中插入自定义的模板。`template` 插槽特别用于自定义表格中的行、列或单元格内容。

例如，如果你想自定义某一列的显示内容，可以使用 `Scoped Slot` 的语法来定义。下面是一个简单的示例，展示如何使用 `template` 插槽来自定义某一列的显示：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button @click="handleEdit(scope.row)">编辑</el-button>
        <el-button @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, /* ...更多数据 */]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('编辑', row);
    },
    handleDelete(row) {
      console.log('删除', row);
    }
  }
}
</script>

在这个例子中，我们定义了一个 `el-table-column` 并使用 `v-slot` 指令来创建一个插槽，其中 `scope` 是一个对象，包含了当前行数据和一些其他属性。你可以在这个插槽中使用 `scope.row` 来访问当前行的数据，并创建自定义的操作按钮。

使用 `template` 插槽可以让你更加灵活地控制表格中的显示内容，你可以插入任何自定义的 HTML 和 Vue 组件来实现复杂的交互和布局。