看到这标题，老实说一开始第一个想法是难道用：Vue.compile？render？发现门槛有点高，因为第三方组件是在 HTML 块上已经编译好了的，所以如何用 JS 再动态添加再编译呢？
于是，想到 Vue 的更新原理：只要触发它的数据就可以重新编译组件成 HTML 代码，那么只要把数据传到数组里（用 for 循环和 if 判断组件类型即可）扔过去不就完事了，唯一的缺点就是，每次都要从头到尾重新编译下。代码如下：
<template> <div class="WorkContent"> <el-table :data="list" align="center" header-align="center"> <el-table-column type="index"></el-table-column> <el-table-column label="内容"> <template slot-scope="scope"> <el-input v-if="scope.row.type === 0" type="textarea" :rows="2" :disabled="true" v-model="scope.row.content"></el-input> <audio v-else-if="scope.row.type === 1" :src="scope.row.content" controls></audio> <img v-else-if="scope.row.type === 2" :src="scope.row.content" alt="图片"> <video v-else-if="scope.row.type === 3" :src="scope.row.content" controls></video> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <i class="el-icon-close" @click="deleteItem(scope.$index)"></i> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: 'WorkContent', data () { return { list: [] } }, methods: { deleteItem (index) { this.list.splice(index, 1) } } } </script> <style lang="stylus" scoped> </style>
