鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue怎么動態(tài)渲染虛擬DOM

vue怎么動態(tài)渲染虛擬DOM

在使用Element UI時碰到一個問題，想要根據(jù)el-table自定義一個組件，但是發(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可以實現(xiàn)效果但是不能使用vue組件
          return '<button>編輯</button>'
      }},
  ]

想問下有什么辦法能實現(xiàn)以上的功能嗎？

回答
編輯回答
眼雜

functional組件，render函數(shù)了解一下

2018年4月4日 05:20
編輯回答
尛憇藌

你的組件直接用jsx來寫

2017年9月12日 06:10
編輯回答
痞性

可能你要寫一個代理的組件，接受你的renderCell方法，在render的時候返回renderCell的執(zhí)行結(jié)果。（猜的）

{
    props: ['renderCell'],
    render() {
        return this.renderCell()
    }
}
2017年7月2日 06:06