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

ゝ一世哀愁。 2023-10-08 16:18 45阅读 0赞

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][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的列：

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

[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN