element ui table 通过配置生成表格遇到插槽部分无法通过变量传递的问题

想用 element ui 实现一个需求,通过配置生成表格,用代码简单示意如下:

定义一个组件

<template>
  <el-table v-bind="table">
    <el-table-column
      v-bind:key="index"
      v-for="(column, index) in columns"
      v-bind="column"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "MyTable",
  props: ["table", "columns"],
  created() {
    console.log(this.columns);
  }
};
</script>

<style scoped></style>

调用组件

<template>
  <MyTable :table="table" :columns="columns"></MyTable>
</template>

<script>
import MyTable from "../../../../components/MyTable";
export default {
  name: "Index",
  components: { MyTable },
  data() {
    return {
      table: {
        data: [{ name: "小王", age: 18 }]
      },
      columns: [
        { prop: "name", label: "姓名" },
        { prop: "age", name: "年龄" }
      ]
    };
  }
};
</script>

<style scoped></style>

这样就可以完全用配置生成表格,但是,实现如下这样的表格就不能满足了

<el-table-column
  align="right">
  <template slot="header" slot-scope="scope">
    <el-input
      v-model="search"
      size="mini"
      placeholder="输入关键字搜索"/>
  </template>
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
  </template>
</el-table-column>

我不能将插槽部分作为字符串插入进去。网上搜索没找到什么方案,动态组件也试过,没有实现,不知道这个该如何做呢?

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!