工作中使用的一些技巧总结【后续持续性更新】

  "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数据类型

 

 

 

启用（可提示的）