I encountered a problem when using Element UI. I wanted to customize a component according to el-table, but I found it impossible to render the content of el-tabel-col dynamically.
this is the official usage. Use slot to customize the content
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label=""
width="180">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"></el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
</template>what I want to customize now is to dynamically render el-table-column, by customizing cols content. Here is my code
<el-table :data="data.list">
<el-table-column v-for="col in cols"
:key="col.prop"
:prop="col.prop"
:label="col.label">
<!-- jsslot -->
</el-table-column>
</el-table>cols: [
{prop: "dayTime", label: ""},
{prop: "name", label: ""},
{prop: "op", label: "",renderCell(){ //JSXDOMel-table-column
return (
<el-button></el-button>
<el-button></el-button>
)
}},
{prop: "html", label: "html",renderCell(){ //htmlv-htmlvue
return "<button></button>"
}},
]is there any way to achieve the above functions?