一.表格显示如下:使用表格中的formatter用来格式化内容
方法类型如下:
Function(row, column, cellValue, index)
二.使用举例:
1.table表格中显示如下:
<el-table :data="userData" stripe style="width: 100%" tooltip-effect="dark" ref="multipleTable"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="loginAccount" label="账号" width="180"> </el-table-column>
<el-table-column prop="userName" label="用户名" width="180"> </el-table-column>
<el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
<el-table-column prop="phone" label="电话" width="180"> </el-table-column>
<el-table-column prop="tel" label="手机" width="180"> </el-table-column>
<!--- 举例关键一行:使用 formatter格式化内容 ,formatterSex为自定义方法名 --->
<el-table-column prop="sex" label="性别" width="180" :formatter="formatterSex"> </el-table-column>
<el-table-column prop="addr" label="地址" min-width="180"> </el-table-column>
<el-table-column prop="createDatetime" label="创建日期" width="180"> </el-table-column>
<el-table-column prop="updateDatetime" label="更新日期" width="180"> </el-table-column>
<el-table-column fixed="right" label="允许登陆" width="120">
<template slot-scope="scope">
<el-switch @change="switchChange(scope.row.typeId,scope.row.id)" v-model="scope.row.typeId"
active-color="#13ce66" inactive-color="#ff4949" :active-value="active" :inactive-value="inactive">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="120" fixed="right">
<template slot-scope="scope">
<el-button type="normal" circle @click="editUser(scope.row)"><i class="el-icon-edit"></i></el-button>
<!-- <el-button type="normal" circle><i class="el-icon-delete"></i></el-button> -->
</template>
</el-table-column>
</el-table>
2.方法中如下:
methods: {
formatterSex(rows, column) {
// 0表示男,1表示女,存储数据库中的类型为int类型0或1
return rows.sex == 0 ? "男" : "女";
},
}
3.效果展示
数据库中数据如下: