element-plus 表格 操作列动态展示

在 Element Plus 中，可以通过 `el-table-column` 的 `scoped-slot` 来实现表格操作列的动态展示。下面是一个示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button v-if="row.canEdit" type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button v-if="row.canDelete" type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          canEdit: true,
          canDelete: false
        },
        {
          name: '李四',
          age: 20,
          canEdit: false,
          canDelete: true
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('编辑', row)
    },
    handleDelete(row) {
      console.log('删除', row)
    }
  }
}
</script>

在上面的代码中，我们在操作列中使用了 `default` scoped-slot，并通过 `row` 参数来获取当前行的数据。在 `default` scoped-slot 中，我们根据 `row` 的 `canEdit` 和 `canDelete` 属性来动态展示编辑和删除按钮，实现了操作列的动态展示。

需要注意的是，如果使用了 `default` scoped-slot，就不能再使用 `prop` 属性来指定列的数据源，而是需要在 `default` scoped-slot 中手动获取数据并进行展示。