🍰
frontelementpackage
Translations: 🇨🇳 汉语
formlabel示例数据如下：
```js
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）是我们封装的方法
```
引入示例：import CommonTable from 'frontelementpackage/src/CommonTable.vue'
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
}
```
父组件调用示例如下
```
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)
}
```
调用示例如下
```js
饼状图传入数据示例
{
"series": [
{
"data": [
{
"name": "魅族",
"value": 2200
},
{
"name": "三星",
"value": 4500
}
],
"type": "pie"
}
]
}
```
```js
柱状图数据
{
"xData": [
"周一",
"周二",
],
"series": [
{
"name": "新增用户",
"data": [
5,
10,
],
"type": "bar"
},
{
"name": "活跃用户",
"data": [
200,
500,
],
"type": "bar"
}
]
}
```
```js
折线图数据：
{
"xData": [
"20191001",
"20191002",
"20191003",
],
"series": [
{
"name": "苹果",
"data": [
5920,
4738,
659,
],
"type": "line"
},
{
"name": "vivo",
"data": [
6564,
7380,
3745,
],
"type": "line"
},
]
}
```
## 1.8.表格权限示例
### 8.1 首先是我封装了复选框组件
位置在于 '@/components/checkBox.vue'
调用实例
```vue
```js
import CommonTable from "frontelementpackage/src/CommonTableButtonFixed.vue";
--1.表头：tableLabel: [
{
prop: "id",
label: "id",
minWidth:"20%"
// position:"right"
},
{
prop: "name",
label: "名字",
minWidth:"20%"
},
{
prop: "phone",
label: "电话",
minWidth:"20%"
},
{
prop: "number",
label: "商铺号",
minWidth:"20%"
},
],
--2.button名称：tableButton: {
width: 300,
data: [
{
name: "编辑",
type: "primary",
size: "small",
},
{
name: "编辑附件",
type: "info",
size: "small",
},
{
name: "删除",
type: "danger",
size: "small",
},
],
},
--3.数据：tableData: [{ id: 1, name: "小红", phone: "19120636444", number: "sad" }],
--4.调用起来
import CommonTable from "frontelementpackage/src/CommonTableButtonFixed.vue";