【avue】常用属性和crud使用方法总结

curd组件常用操作

1.1 基础表格

在option里可以设置表格的属性。

option: {

          height:'auto',     //表格高度
          calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）
          tip: false,
          searchShow: true,      //首次加载是否显示搜索
          searchMenuSpan: 4, //搜索按钮长度
          searchSpan:5,      //搜索框长度  最大长度24
          border: true,      //表格边框是否显示
          index: true,       //是否显示序号
          viewBtn: false,     //是否显示查看按钮
          selection: true,		//是否显示行多选
          dialogClickModal: true,	
          showHeader:true,	
          addBtn:false,      //是否显示表格左侧添加按钮
          editBtn:false,     //是否显示操作栏编辑按钮
          delBtn:false,      //是否显示操作栏删除按钮
          excelBtn:false,    //表格左侧导出按钮是否显示
          labelWidth:120,    //表单前面的标题长度
          refreshBtn: true, //表格上面小的 刷新按钮
          columnBtn: true,  //表格上面小的 列表按钮
          searchBtn: true,  //表格上面小的 搜索按钮
          menu: true,        //是否显示操作栏
}

在column可以设置列的属性。

     label: "创建人",  
          prop: "createUser",  
          type:"select",        //设置类型，常用的类型右选择类型select，搜索类型search，日期类型datetime，文本框textarea ，默认为输入类型input等
          addDisplay: false,   //新增界面时是否显示该列
          editDisplay: false,  //编辑界面时是否显示显示该列
  		  viewDisplay: false  //查看界面是否显示
          display: false,     	//是否在新增、编辑、查看显示
	 	  labelWidth: 150,   //字段名宽度
		  slot: true,        //是否开启自定义
  		  search:true		//是否开启搜索功能
          hide:true,         //是否在表格隐藏该列
  		  rules: [{		//表单校验规则
            required: false, //是否为必填项
            message: "请输入", //输入框内的提示信息
            trigger: "blur"
   }],

1.2 新增按钮

在option里可以设置表格左侧新增按钮是否显示 addBtn:true

1.3 编辑按钮

在option里可以设置表格右侧操作栏编辑按钮是否显示 editBtn:true

1.4 删除按钮

在option里可以设置表格右侧操作栏删除按钮是否显示 delBtn:true

1.5 自定义操作栏按钮

自定义操作栏按钮时，需要在将slot设为”menu”，即自定义操作栏按钮。

你可以使用element的组价自定义按钮样式，type为按钮类型，size为大小，icon为图标，@click可以点击调用methods方法。你可以去https://element.eleme.cn/#/zh-CN查看其组件的使用。

 <template slot="menu">
    <el-button type="danger"
               size="small"
               icon="el-icon-eleme"
               plain-->
               @click="自定义方法名">自定义按钮
    </el-button>
  </template>

1.6 自定义表格左侧按钮

自定义表格左侧按钮时，需要在将slot设为”menuLeft”，即自定义表格左侧按钮。

<template slot="menuLeft">
        <el-button type="primary" size="small">自定义按钮</el-button>
</template>

1.7 字段搜索

首先在对应字段开启搜索功能 search:true 。
你可以通过searchLabelWidth:100来设置标题宽度 、searchOrder：1 设置搜索顺序、searchSpan:18 设置搜索框宽度、searchValue:‘small’ 设置搜索默认值、

1.7.1 时间类型

时间类型type:’datetime’ ，设置其search:true 。

1.7.2 时间范围类型

使用时间范围搜索时，需要设置searchRange:true，即开启时间范围搜索。
然后在onload( )里添加代码，设置两个时间段参数：

onLoad(page, params = {}) {
        //加入以下为设置时间段查询
        let data = Object.assign(params, this.query);
        if(this.query.createTime) {
          data.createTime_datege = params.createTime[0];
          data.createTime_datelt = params.createTime[1];
          delete data.createTime;
        }
 }

然后在后端的对应的entity的controller里，更改list()方法接收参数的类型，使用Map接收：

public R<IPage<Entity>> list(@ApiIgnore @RequestParam Map<String, Object> entityMap, Query query) {
   IPage<Entity> pages = entityService.page(Condition.getPage(query), Condition.getQueryWrapper(entityMap, Entity.class));
   return R.data(pages);
}

1.7.3 字典类型

1.7.3.1 系统字典
在 系统管理-系统字典 页面点击 新增 按钮，设置其 字典编号 和字典名称等后保存。
然后在vue界面对应的字段中，设置type为select类型，加入 字典地址

dicUrl: '/api/blade-system/dict/dictionary?code=poc_category', 
props: {
            label: "dictValue",
            value: "dictKey"
},

其中，code=” ”的内容为你填入的字典编号， dictKey为字典的序号，dictValue为字典的名称。

1.7.3.2 业务字典
在 系统管理-系统字典 页面点击 新增 按钮，设置其 字典编号 和字典名称等后保存。
然后在vue界面对应的字段中，设置type为select类型，加入 字典地址

dicUrl: '/api/blade-system/dict-biz/dictionary?code=poc_category', 
props: {
            label: "dictValue",
            value: "dictKey"
},

其中，code=” ”的内容为你填入的字典编号， dictKey为字典序号，dictValue为字典名称。
1.7.3.3 静态字典
设置dicData为一个Array数组即可，便会自动加载字典到对应的组件中，注意返回的字典中value类型和数据的类型必须要对应，比如都是字符串或者都是数字。

dicData:[{
                label:'一级',
                value:0,
                children:[
                  {
                    label:'一级1',
                    value:1,
                  },{
                    label:'一级2',
                    value:2,
                  }
                ]
     }],

1.7.4 字段内容格式化
使用formatter方法格式化内容。

{
         label:'姓名',
         prop:'name',
         formatter:(val,value,label)=>{
         return val.name+'格式化内容'
    }

1.8 自定义表格列
首先设置列的属性slot为true，在卡槽中用prop作为卡槽的名字即可。
如设置自定义prop为name的列：

<template slot="name">
      <!-- 此处自定义你的效果--!>
</template>

1.9 自定义表单项
首先设置列的属性formslot为true，在卡槽中指定列的prop加上Form作为卡槽的名称。
如设置自定义prop为name的列：

<template slot="nameForm" >
      <!-- 此处自定义你的效果-->
</template>