在网上找的这个费劲啊。
直接放代码吧:
<el-table
v-loading="table.loading"
height="60vh"
size="small"
ref="multipleTable"
:data="tableData"
stripe
width="100%"
:default-sort="{prop: 'groupcode', order: 'descending'}"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="60" align="center"/>
<!-- <el-table-column type="index" label="序号" :index="indexMethod" align="center"/>-->
<template v-for="column in tableColumns">
<el-table-column
:fixed="column.fixed"
:prop="column.prop"
:label="column.label"
:sortable="column.sortable"
:width="column.width"
:align="column.align"
>
<template slot-scope="scope">
<div v-if="column.prop==='images'">
<span style="margin-left: 10px">{{ scope.row.images.length>0? scope.row.images[0].file_name: ""}}</span>
</div>
<div v-else>
<!-- 划重点 重点是除去特殊列其他列依然取正常显示的属性值的地方-->
{{scope.row[scope.column.property]}}
</div>
</template>
</el-table-column>
</template>
<el-table-column label="操作" header-align="center" align="center" class="main_table_op">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" icon="el-icon-s-unfold" width="80px" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button size="mini" plain type="info" icon="el-icon-circle-check" width="80px" @click="handleUpdate(scope.row)">
留言
</el-button>
<el-button size="mini" plain type="primary" icon="el-icon-edit" width="80px" @click="handleUpdate(scope.row)">
编辑
</el-button>
<el-button size="mini" plain type="danger" icon="el-icon-delete" width="80px" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>