vue/avue/element-ui随记|vue/avue/element-ui使用

最近在使用vue做前端项目，简单记录下学习过程。

 

• Avue官网文档：https://avuejs.com/doc/crud/crud-dic
• Element-ui官网文档：https://element.eleme.cn/#/zh-CN/component/tree
• ES6---箭头函数()=>{} 与function的区别：https://blog.csdn.net/github_38851471/article/details/79446722
• vue页面跳转/返回上一页面：https://www.cnblogs.com/lgnblog/p/10084121.html      https://blog.csdn.net/HYeeee/article/details/82691376
•  

• ref和$refs: https://blog.csdn.net/qq_38526573/article/details/98216037

• 展开语法： https://blog.csdn.net/weixin_41615439/article/details/85319618

• JS变量提升：https://blog.csdn.net/qq_39712029/article/details/80951958

• export const: https://blog.csdn.net/BinshaoNo_1/article/details/92977957

 

 

// 表格属性
#width: “100%”,//表格宽度
#calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）
#height: “auto”,//表格高度
#maxHeight: “auto”,//表格最大高度
#border: true,//是否显示表格边框
#expand: false,//是否展开折叠行
#index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
#indexLabel: “#”,//序号的标题
#stripe: true,//是否显示表格的斑马条纹
#showHeader: true,//是否显示表格的表头
#defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式
#align: “center”,//表格列对其方式left/center/right
#menu: true,//是否显示操作菜单栏
#menuWidth: 240,//操作菜单栏的宽度
#menuAlign: “left”,//菜单栏对齐方式left/center/right
#searchSize: “small”,//搜索控件的大小small/mini
#columnBtn: true,//列显隐按钮
#refreshBtn: true,//刷新按钮
#addBtn: true,//添加按钮
#searchBtn: true,//搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
#editBtn: true,//行内编辑按钮
#delBtn: true,//行能删除按钮

#card    卡片效果    Boolean    true/false    false
#emptyBtn    清空按钮    Boolean    true/false    true
#emptySize    清空按钮的大小    String    medium/mini/small    medium
#emptyText    清空按钮的文字    String    -    清空
#enter    回车提交表单    Boolean    true/false    false
#group    分组    Array    -    -
#gutter    项之间的间    Number    -    20
#labelWidth    表单的label宽度    String    -    80
#labelPosition    表单的label位置    String    left/top/right    left
#menuBtn    是否显示按钮    Boolean    true/false    true
#menuSpan    菜单的span    Number    1-24    24
#menuPosition    按钮的位置    String    left/center/right    center
#size    表单全局控件的大小    String    medium/mini/small    medium
#submitBtn    提交按钮    Boolean    true/false    true
#submitSize    提交按钮的大小    String    medium/mini/small    medium
#submitText    提交按钮的文字    String    -    提交
//列属性
#label:“租户ID”,//列名称
#prop:“id”,//列字段
#placeholder:“请输入租户ID”,//控件提示输入语句
#align:“left”,//列的对其方式，覆盖table的align
#width://列宽度
#minWidth:“auto”,//列最小宽度
#sortable:false,//排序
#hide:true,//隐藏列 表格起作用
#span:24,//表单栅列  可控制独显列
#precision:2,//数字框输入精度（当type为number时）
#search:false,//是否支持搜索
#type:“input”,//input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
#maxRows:4,//最大行（当type为textarea）
#minRows:2,//最小行（当type为textarea）
#multiple:false,多选（当type为select/tree时）
#format:"",//显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
#valueFormat:"",//真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
#clearable:true,//表单清空
#size:“medium”,//表单大小medium/small/mini
#editDisabled:false,//表单编辑时是否禁止
#editDisplay:false,//在表单的“编辑”弹出页是否显示该字段
#addDisabled:false,//表单编辑时是否禁止   
#addDisplay:false,//在表单的“新增”弹出页，是否显示该字段
#slot:false,//列自定义 支持自定义列
#formslot:false,//表单自定义
#fixed:true,//冻结列
#formWidth:“auto”,//表单宽度
#formHeight:“auto”,//表单行高度
#overHidden:false,//超出隐藏
#rules://表单规则,参考ele表单规则配置Object
#dicData://传入本次需要的静态字典（在column中dicData写对象key值即可加载）
#dicMethod://传入字典的请求方式
#dicQuery://传入字典的请求参数Object
#dicUrl://字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）