Element UI 的 Table 组件格式化表格单元格内容的formatter函数

148 阅读1分钟

问题

订单表格数据是从服务器拿到的用户id,所以需要在表格再做一次格式化,用_id映射出用户名

image.png 这里发现拿不到数据 image.png

 {
    label: '预约用户',
    prop: 'userId',
    formatter(row, column, value) {
    let username = this.allUser[value]
        if (username) {
            return username
        } else {
            return "用户不存在或已被删除"
        }
    }
}

allUser是一个用_id对应用户名的对象,GetAllUser()方法用于获取所有用户数据

 // 获取所有用户
async getAllUsetList() {
    const res = await GetAllUser();
    //GetAllUser()方法用于获取所有用户数据,然后将_id和username一一对应,存入allUser
    this.allUser = res.data.reduce((map, item) => {
        map[item._id] = item.username;
        return map;
    }, {});
    console.log(this.allUser);
}

解决

后来发现这里的formatter需要用箭头函数,否则拿不到allUser

 {
    label: '预约用户',
    prop: 'userId',
    formatter:(row, column, value) => {
    let username = this.allUser[value]
        if (username) {
            return username
        } else {
            return "用户不存在或已被删除"
        }
    }
},

改成箭头函数之后就可以了

image.png 归根结底还是自己的功底不够扎实,再加上粗心大意,在这里记个教训吧