解决办法:仔细看官网
template
<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="sex"
label="性别"
width="180"
:formatter="formatSex"
>
</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>
data
tableData: [{
myIndex: 6,
date: '2016-05-02',
name: '王小虎',
address: '<i>上海市普陀区金沙江路 1518 弄</i>',
sex: 0
}, {
myIndex: 7,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
sex: 1
}, {
myIndex: 8,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
sex: -1
}, {
myIndex: 9,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
sex: 0
}]
methods
formatSex: function (row, column) {
return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
}