vue中使用element table，渲染 html

最新推荐文章于 2024-08-09 20:47:34 发布

「已注销」

最新推荐文章于 2024-08-09 20:47:34 发布

阅读量1.7k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/huning188/article/details/84981692

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

解决办法：举一反三，仔细看看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>上海市普陀区金沙江路 1518 弄</i>'
      }, {
        myIndex: 7,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        myIndex: 8,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        myIndex: 9,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]