一.表格顯示如下:使用表格中的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.效果展示
數據庫中數據如下: