# frontElementPackage

**Repository Path**: andy-code1/front-element-package

## Basic Information

- **Project Name**: frontElementPackage
- **Description**: 封装了Element-UI的常用组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-09-04
- **Last Updated**: 2022-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# elementui 引入

安装 npm install  element-ui@2.15.6   

项目引用示例：
frontelementpackage
引入import CommonTable from 'frontelementpackage/src/CommonTable.vue'



<strong>main.js中</strong>

```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
<br><br>



<strong>这些组件都是直接复制到你的component文件夹下就好了</strong>

# 1.CommonForm.vue使用教程如下

 <img src="./pirture/form.png"/>


formlabel示例数据如下：
```
this.formlabel=[
    {
        "model": "name",
        "label": "姓名",
        "type": "input"
    },
    {
        "model": "sex",
        "label": "性别",
        "type": "select",
        "opts": [
            {
                "label": "男",
                "value": 1
            },
            {
                "label": "女",
                "value": 0
            }
        ]
    },
    {
        "model": "birth",
        "label": "出生日期",
        "type": "date"
    },
    {
        "model": "addr",
        "label": "地址",
        "type": "input"
    }
]

this.form 表单元素示例
this.form={
    "name": "",
    "addr": "",
    "age": "",
    "birth": "",
    "sex": ""
}

incline ：true or false 是否放在一列上
```
父组件调用示例（common-form）是我们封装的方法

```
<el-dialog
    :title="operateType === 'add' ? '新增用户' : '更新用户'"
    :visible.sync="isShow"
>
    <common-form
    :formLabel="formLabel"
    :form="form"
    :inline="true"
    ref="form"
    ></common-form>
    
    <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
    </div>
</el-dialog>
```
# 2.CommonTable.vue使用教程如下

 <img src="./pirture/table.png"/>


tabledata示例
```
this.tabledata=[
    {
        "id": "46BeC977-dC5b-bB93-2510-9d4AE8CBFc3e",
        "name": "龚静",
        "addr": "宁夏回族自治区 吴忠市 青铜峡市",
        "age": 41,
        "birth": "2010-03-22",
        "sex": 0,
        "sexLabel": "女"
    }
]

this.tableLabel=
[
    {
        "prop": "name",
        "label": "姓名"
    },
    {
        "prop": "age",
        "label": "年龄"
    },
    {
        "prop": "sexLabel",
        "label": "性别"
    },
    {
        "prop": "birth",
        "label": "出生日期",
        "width": 200
    },
    {
        "prop": "addr",
        "label": "地址",
        "width": 320
    }
]

this.config={
    "page": 1,
    "total": 200,
    "loading": false
}
```
父组件调用示例如下
```
 <common-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList()"
      @edit="editUser"
      @del="delUser"
    ></common-table>

```

# 3.CommonTag.vue使用教程如下

 <img src="./pirture/tag.png"/>
tags变量示例： name指的是router中定义路由的name， label是显示的文字
点击tag可以根据name跳转到指定的路由 

```
tags: 
[ 
    { name: "HelloWorld", label:"测试" }, 
    { name:"echart", label:"测试2" }, 
    { name: "aside_Test", label:"测试21" }, 
],
changeMenu(item) {
      this.$router.push({ name: item.name });
    },
```
注意在调用删除按钮的时候，由于vue子组件不能直接改变父组件的值，
因此我们对应emit的方法（deleteTag）在我们的父组件的method中需要进行method方法的定义
父组件实例如下

```
deleteTag(index){
      this.tags.splice(index,1)
      console.log(index)
    }
```
调用示例如下
<commontag :tags="tags" @deletetag="deleteTag"></commontag>

子组件方法

```
 handleClose(tag, index) {
      console.log(tag);
    //   console.log(index);
      // eslint-disable-next-line
     
      this.$emit('deletetag',index)
    }
```



# 4.CommonAside.vue
如果要实现伸缩功能，事件总线中监听isCollapse这个变量并且赋值就可以了 //asyncMenu
解决了submenu收缩时的文字显示的问题。在收缩的状态把这玩意隐藏就好了

路由的格式
```
asyncMenu() {
      return [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "/pc_home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "/pc_table",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "/pc_table",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ];
    }
```
# 5.CommonHeader.vue
基本内容都已经写好了


# 6.怎么做一个管理界面示例
参照pages/pc_vue_client.vue里面的东西

路由中
```
{
        path: '/pc5',
        name: 'card1_pc5',
        component: pc5,
        meta:{title:"pc后台练习",role:'admin',img:''},
        children: [
            {
              path: '/pc_home',
              component:pc_home,
              meta:{title:'后台首页',isShowHead:false,isShowFoot:false,isShowBack:true}
            },
            {
                path: '/pc_table',
                component:pc_table,
                meta:{title:'后台增删改查',isShowHead:false,isShowFoot:false,isShowBack:true}
              }
        ]
    },
```
# 7.echart.vue组件调用示例

父组件基本调用方法
```
<el-card style="height: 200px;width:300px">
  <!-- 柱状图 -->
  <!-- <div style="height:200px" ref="userEcharts"></div> -->
  <echart :chartData="echartData.user" style="height: 200px" isAxisChart="true" />
</el-card>
```
 <img src="./pirture/饼状图.png"/>

 ```
饼状图传入数据示例
{
    "series": [
        {
            "data": [
               
                {
                    "name": "魅族",
                    "value": 2200
                },
                {
                    "name": "三星",
                    "value": 4500
                }
            ],
            "type": "pie"
        }
    ]
}
 ```
<img src="./pirture/柱状图.png"/>

```
柱状图数据

{
    "xData": [
        "周一",
        "周二",
       
    ],
    "series": [
        {
            "name": "新增用户",
            "data": [
                5,
                10,
                
            ],
            "type": "bar"
        },
        {
            "name": "活跃用户",
            "data": [
                200,
                500,
                
            ],
            "type": "bar"
        }
    ]
}
```
<img src="./pirture/折线图.png"/>

```
折线图数据：

{
    "xData": [
        "20191001",
        "20191002",
        "20191003",
       
    ],
    "series": [
        {
            "name": "苹果",
            "data": [
                5920,
                4738,
                659,
                
            ],
            "type": "line"
        },
        {
            "name": "vivo",
            "data": [
                6564,
                7380,
                3745,
                
            ],
            "type": "line"
        },
        
       
    ]
}
```

# 8.表格权限示例



<img src="./pirture/数据图.png">







## 8.1 首先是我封装了复选框组件



位置在于 '@/components/checkBox.vue'

调用实例

```vue

<template>
    <div class="">
        <p-el-checkbox
            v-model="result"
            resultType="Array"
            label="name"
            prop="id"
            :defaultCheck="defaultCheck"
            :checkboxList="checkboxList"
        />
    </div>
</template>

<script>
import Pelcheckbox from "./p-el-checkbox.vue";
export default {
    components: {
        "p-el-checkbox": Pelcheckbox,
    },
    props: [],
    data() {
        return {
            defaultCheck: ["1", "3"],
            checkboxList: [
                { name: "小红", id: "1" },
                { name: "小明", id: "2" },
                { name: "小芳", id: "3" },
            ],
            result: {},
        };
    },
    mounted() {},
    watch: {
        result: function () {
            console.log("变化了：", this.result);
        },
    },
    methods: {},
};
</script>

<style lang='scss' scoped>
</style>

```

## 8.2 然后就可以直接用

```js
CommonTokenEdit.vue

tableData: [
{
    id: "1",
    tokenName: "数据库",
    describe: "与我相关",
    tokenInfo: ["1", "2"],
    },
    {
    id: "2",
    tokenName: "车库管理",

    describe: "与我相关",
    tokenInfo: ["1", "2", "3"],
    },
],
```