vue中使用element table,渲染 html

element table html

解決辦法:舉一反三,仔細看看table td里面button怎么加進去的

<el-table
      :data="tableData"
      ref="singleTable"
      highlight-current-row
      style="width: 100%">
      <el-table-column
        type="index"
        :index = "indexMethod"
        width="50">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180">
      </el-table-column>
      <!-- 渲染html的列 -->
      <el-table-column label="地址">
          <template slot-scope="scope">
              <div v-html="scope.row.address"></div>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(indexMethod(scope.$index), scope.row)">編輯</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(indexMethod(scope.$index), scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
tableData: [{
        myIndex: 6,
        date: '2016-05-02',
        name: '王小虎',
        address: '<i>上海市普陀區(qū)金沙江路 1518 弄</i>'
      }, {
        myIndex: 7,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        myIndex: 8,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        myIndex: 9,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容