在使用Element UI時(shí)碰到一個(gè)問題,想要根據(jù)el-table自定義一個(gè)組件,但是發(fā)現(xiàn)沒法去動態(tài)的渲染el-tabel-col的內(nèi)容。這是官方的使用方法,用slot來自定義內(nèi)容<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>我現(xiàn)在想定制的是通過自定義cols內(nèi)容來動態(tài)渲染el-table-column,下面是我的代碼<el-table :data="data.list"> <el-table-column v-for="col in cols" :key="col.prop" :prop="col.prop" :label="col.label"> <!-- 此處如何用js代替slot --> </el-table-column> </el-table>cols: [ {prop: 'dayTime', label: '日期'}, {prop: 'name', label: '姓名'}, {prop: 'op', label: '操作',renderCell(){ //比如這里寫JSX,怎么才能把動態(tài)生成的虛擬DOM渲染在el-table-column內(nèi)呢 return ( <el-button>編輯</el-button> <el-button>刪除</el-button> ) }}, {prop: 'html', label: 'html',renderCell(){ //返回html內(nèi)容配合v-html可以實(shí)現(xiàn)效果但是不能使用vue組件 return '<button>編輯</button>' }}, ]想問下有什么辦法能實(shí)現(xiàn)以上的功能嗎?
vue怎么動態(tài)渲染虛擬DOM
四季花海
2019-03-19 16:19:38