美文网首页
vue中使用element table,渲染 html

vue中使用element table,渲染 html

作者: 羊羊羊0703 | 来源:发表于2018-06-04 17:29 被阅读0次
    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>上海市普陀区金沙江路 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 弄'
          }]
    

    相关文章

      网友评论

          本文标题:vue中使用element table,渲染 html

          本文链接:https://www.haomeiwen.com/subject/mlpysftx.html