"productStatusList": [ { "dictId": 122, "dictName": "启用", "dictValue": "1", "dictType": "status", "dictDescription": "状态", }, { "dictId": 123, "dictName": "停用", "dictValue": "2", "dictType": "status", "dictDescription": "状态", } ],
需求: 需要将数字 "dictValue": "2" 转换为对应的汉字状态 "dictName": "停用",
3种情况 : 表格 、 select选择 和 P标签内的。
1、 select选择比较简单。就是循环数组
<el-option v-for="item in productTypeList" :label="item.dictName" :key="item.dictValue" :value="item.dictValue" > </el-option>
2、 是表格内的。 定义 一个函数 : typeFormat ,然后函数进行处理
<el-table-column label="使用状态" prop="productType" :formatter="typeFormat" sortable align="center" > </el-table-column>
typeFormat(row, column){ let obj=this.typeList.find( e=>e.dictValue==row.verifyType.toString() ) return obj==null ?"":obj.dictName; },
3、P标签内的
<el-form-item label="审核状态" prop="auditStatus"> <span>{{typeFormat(addForm.productType)}}</span> </el-form-item>
分页
total: 0, //总条数
page: 1, //每页几条
limit: 10, //当前第几页
pagenum: 1,//当前页数
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 30, 50, 100]"
:page-size="limit"
layout="sizes, prev, pager, next"
:total="total"
style="float:right;"
class="pagination"
:current-page="pagenum"
></el-pagination>
//每页多少条
handleSizeChange(val) {
this.limit = val;
this.search();
},
//当前页数
handleCurrentChange(val) {
this.page = val;
this.search();
},
*搜索的时候,要把 page置为1,不然跨页搜索会出现问题
树结构坑记录
<el-tree :data="menus" show-checkbox node-key="id" :props="treeProps" ref="menuAddTree"></el-tree> data(){ return { sels: [], //列表选中列 menus: [], menuIds: [], //角色拥有的权限 treeProps: { children: "children", label: "name" }, } }
addSubmit(){params.menuIds = this.getMenuIds();}
//获取选中、半选中节点
getMenuIds: function () { return this.$refs.menuAddTree .getCheckedKeys() .concat(this.$refs.menuAddTree.getHalfCheckedKeys()); },
/** * (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false */
setMenuIds: function (keys) { this.$refs.menuAddTree.setCheckedKeys(keys, true); },
menus数据结构:
表格内树形展示
使用插件treeTable进行的渲染 https://gitee.com/njp/shoppingMall.git
<tree-table :data="menuData" :columns="columns" border highlight-current-row style="width: 100%;" :header-cell-style="{background:'rgb(238, 241, 246)',color:'rgb(96, 98, 102)'}" >
<el-table-column label="类型" prop="type" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.object.type === null"></el-tag>
<el-tag v-if="scope.row.object.type === 0">目录</el-tag>
<el-tag v-if="scope.row.object.type === 1">菜单</el-tag>
<el-tag v-if="scope.row.object.type === 2">操作</el-tag>
</template>
</el-table-column>
/*代码段*/
<el-button type="primary" plain @click="addLevelOne(0,-1)">添加一级分类</el-button> //代表一级分类
<el-button type="primary" plain @click="addLevelOne(scope.row.id,scope.row.type)">添加多级分类</el-button>
<el-table-column label="路径" prop="object.url" align="center"></el-table-column>
</tree-table> data(){ menuData: [], columns: [ { text: "名称", value: "text", width: 200 } ], },
method:{
search(parentId, parentType){
//对一级和多级进行判断
if (parentType != 2) {
this.addForm.type = parentType + 1;
} else {
this.addForm.type = parentType;
}
this.addForm.parentId = parentId;
this.addDialogVisible = true;
}
}
menuData数据类型
启用(可提示的)