Element-ui Table 表格数据类型转换：比如后台返回1=目录，2=菜单，3=按钮

最新推荐文章于 2024-07-23 16:18:36 发布

在奋斗的大道

最新推荐文章于 2024-07-23 16:18:36 发布

阅读量1.8k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/113779009

版权

vue 专栏收录该内容

84 篇文章 11 订阅

订阅专栏

实际开发过程中，后台返回特定数字或字符串代表不同含义

比如：1=目录，2=菜单，3=按钮，我们需要在前端开发中转换为对应的汉字描述。

功能实现:

第一步：在methods 添加一个转换函数：formatPrivilegeType

// 权限类别转换
        formatPrivilegeType: function( row, column) {
                 if(row.privilegeType === '1'){
                     return '目录'
                 } else if(row.privilegeType === '2') {
                     return '菜单'
                 } else if (row.privilegeType === '3') {
                     return '按钮'
                 } else {
                     return ''
                 }
        }

第二步:在指定el-table-column 组件中，绑定转换函数

 <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >
                        </el-table-column>

效果展示:

权限功能页面的全部代码:

<style>
</style>
<template>
  <div id="privilege-manager">
   <!--顶部菜单栏-->
    <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button
              class="el-icon-refresh"
              type="primary"
              @click="toAdd()">添加
            </el-button>
          </el-form-item>
      </el-form>
      <!--表格-->  
       <el-row>
            <el-table :data="tableData" style="width: 100%;">
                        <el-table-column prop="privilegeName" label="权限名称" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="权限编码" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteRole(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-sizes="[5, 10, 20, 30, 40]"
                        :page-size=pagination.pageSize
                        layout="total, prev, pager, next"
                        :total=pagination.total>
                    </el-pagination>
        </el-row>


  </div>
</template>

<script>
export default{
    name: 'privilege-manager',
    data () {
     return {
        tableData: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        privilege: {
          id: '',
          privilegeName: '',
          privilegeCode: '',
          privilegeType: ''
        },
        pagination: {
            pageIndex: 1,
            pageSize: 10,
            total: 0,
        }
      }
    },
    methods:{
         init () {
        var self = this
         this.$axios({
            method:'post',
            url:'/api/baoan/privilege/getPage',
            data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize},
            headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
           console.log(res);
           self.pagination.total = res.data.datas.data.total;
           self.tableData = res.data.datas.data.records;
        })
          .catch(function (error) {
            console.log(error)
          })
        },
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize = val;
                this.pagination.pageIndex = 1;
                this.init();
        },
        handleCurrentChange(val) {
                 console.log(`当前页: ${val}`);
                this.pagination.pageIndex = val;
                this.init();
        },
        // 权限类别转换
        formatPrivilegeType: function( row, column) {
                 if(row.privilegeType === '1'){
                     return '目录'
                 } else if(row.privilegeType === '2') {
                     return '菜单'
                 } else if (row.privilegeType === '3') {
                     return '按钮'
                 } else {
                     return ''
                 }
        }
    },
    mounted: function () {
      this.init()
  }


}
</script>