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