1. 通过 Object.keys 进行数据处理
接口返回数据
{
"neverUsed": 33,
"inDepository": 0,
"onTheShelf": 29,
"takeDown": 1,
"toBeRepair": 0,
"repairing": 1,
"toBeScrap": 0,
"scrapping": 1,
"scrapped": 0
}
需要处理成的数据
[
{
"name": "在库",
"value": 0
},
{
"name": "未使用",
"value": 33
},
{
"name": "已上架",
"value": 29
},
{
"name": "维修中",
"value": 1
},
{
"name": "已报废",
"value": 0
},
{
"name": "报废中",
"value": 1
},
{
"name": "已下架",
"value": 1
},
{
"name": "待维修",
"value": 0
},
{
"name": "待报废",
"value": 0
}
]
实现过程
getAssetsStatus().then((res) => {
if (res.data.code == 200) {
let list = res.data.data
let data = []
// 将 对应字段的名称 定义一个 对象(map)
let map = {
inDepository: '在库', // 在库
neverUsed: '未使用', // 未使用
onTheShelf: '已上架', //已上架
repairing: '维修中', // 维修中
scrapped: '已报废', // 已报废
scrapping: '报废中', //报废中
takeDown: '已下架', // 已下架
toBeRepair: '待维修', // 待维修
toBeScrap: '待报废', //待报废
}
// 拿到 定义的对象的 key ,并遍历里面的每一项
Object.keys(map).map((item) => {
data.push({
name: map[item], // 利用中括号取值法 拿到名字
value: list[item],// 利用中括号取值法 拿到 value 值。
})
})
console.log('data',data)
this.initPieEcharts(data)
}
2. 星期 数据处理
后端返回数据
- dayOfWeek: 6
- dutyDay: “2022-08-06”
希望处理的结果
- 2022-08-06 星期六
改善前的处理方法
weekTranslate(date, weekIndex) {
// if (week == 0) {
// return date + '星期天'
// }
// if (week == 1) {
// return date + ' 星期一'
// }
// if (week == 2) {
// return date + ' 星期二'
// }
// if (week == 3) {
// return date + ' 星期三'
// }
// if (week == 4) {
// return date + ' 星期四'
// }
// if (week == 5) {
// return date + ' 星期五'
// }
// if (week == 6) {
// return date + ' 星期六'
// }
},
改善后的处理方法
weekTranslate(date, weekIndex) {
const weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
const dateWeek = date + ' '+ weeks[weekIndex]
return dateWeek
},
3. 封装组件中 button 触发事件的处理
思路一:
遍历渲染多个 button ,触发按钮事件的时候,把 text 传回给父组件,最后父组件根据 text 动态判断,执行增删改查相关逻辑
父组件配置需要添加的button:
opBuList: [
{
type: 'text',
text: '编辑',
},
{
type: 'text',
text: '删除',
}
],
editHandle()
deleteHandle()
testHandle(text){
if(text === '编辑') this.editHandle()
if(text === '删除') this.deleteHandle()
}
封装组件中的for 渲染:
<Button
v-for="(o, i) in opBuList"
:key="i"
size="mini"
:type="o.type"
:disabled="scope.row.disabled && o.disabled"
@click="operationHander(text, scope.row)"
>{
{
o.text }}</Button
>
operationHander(text){
this.$emit('testHandle',text)
}
思路二 :
配置好 增删改查 相关方法的 方法名称,遍历渲染多个 button ,触发 button 事件的时候,将方法名 传回给 父组件。父组件根据 this方法名 调用父组件中 定义好的 增删改查 的相关方法。
父组件配置需要添加的button:
opBuList: [
{
type: 'text',
func: 'editFunc'
},
{
type: 'text',
func: 'deleteFunc'
}
],
// 编辑事件
editFunc(){
}
// 删除事件
deleteFunc(){
}
testHandle(func){
this[func]()
}
封装组件中的for 渲染:
<Button
v-for="(o, i) in opBuList"
:key="i"
size="mini"
:type="o.type"
:disabled="scope.row.disabled && o.disabled"
@click="operationHander(o.func, scope.row)"
>{
{
o.text }}</Button
>
operationHander(func){
this.$emit('testHandle',func)
}