首页 前端知识 【vue】avue-crud表单属性配置(表格以及列)

【vue】avue-crud表单属性配置(表格以及列)

2024-03-01 12:03:19 前端知识 前端哥 302 305 我要收藏

目录

  • 前言
  • 1. 表格属性
  • 2. 列属性
  • 3. 互补

前言

项目实战中需要调某个样式,但作为后端开发者也只能硬着头皮,此贴作为初学前端的第一帖,以下为学习笔记。

  • 对应form属性文档可看这篇文章:form属性文档
  • 对应curd属性文档可看这篇文章:curd属性文档

1. 表格属性

以下是对其中表格属性的解释和补充说明:

menu:true,      //是否显示操作菜单栏,设置为 true 表示显示,false 表示不显示。

menuTitle:"操作栏标题",    //改变操作栏标题,自定义操作菜单栏的标题。

menuWidth:240,      //操作菜单栏的宽度。

menuAlign:'left',      //菜单栏对齐方式,可以设置为 'left'、'center' 或 'right'。

addBtn:true,      //是否显示添加按钮,用于在表格中添加数据。

searchBtn:true,      //是否显示搜索显隐按钮,当表格列中有搜索的属性或 searchslot 为 true 时,自定义搜索按钮起作用。

editBtn:true,      //是否显示行内编辑按钮,用于编辑表格中的行数据。

delBtn:true,      //是否显示行删除按钮,用于删除表格中的行数据。

width:'100%',        //表格宽度,可以设置为百分比或具体数值,用于定义表格的宽度大小。

calcHeight:'auto',        //表格高度差,主要用于减去其他部分,以便让表格高度自适应。

height:'auto',         //表格高度,可以设置为具体数值或 'auto',用于定义表格的固定高度。

maxHeight:'auto',         //表格最大高度,可以设置为具体数值或 'auto',用于限制表格的最大高度。

border:true,    //是否显示表格边框,设置为 true 表示显示,false 表示不显示。

expand:true,    //是否展开折叠行,设置为 true 表示允许展开折叠行,false 表示不展开。

index:true,  //是否显示表格序号,根据分页会自动计算,例如每页10行,第二页会从11开始计数。

indexLabel:'xx',    //序号的标题,可以自定义。

stripe:true,      //是否显示表格的斑马条纹,设置为 true 表示显示,false 表示不显示。默认为false

showHeader:true,      //是否显示表格的表头,设置为 true 表示显示,false 表示不显示。默认就是true

defaultSort:     //表格的默认排序字段,包括 prop(默认排序字段)和 order(排序方式,'descending' 或 'ascending')。

align:'center',   //表格列对齐方式,可以设置为 'left'、'center' 或 'right'。

searchSize:'small',    //搜索控件的大小,可以设置为 'small' 或 'mini'。

columnBtn:true,      //是否显示列显隐按钮,用于显示或隐藏表格的列。

refreshBtn:true,      //是否显示刷新按钮,用于刷新表格数据。

labelWidth:100,      //新增表单的 label 宽度。

highlightCurrentRow:true,   //true 选中这一行的时候会高亮,默认为false

selection:true,      //是否显示勾选列,用于显示表格中的勾选列。

selectable:      //根据条件判断该行是否能被勾选的函数,接收行数据和索引作为参数,返回 true 表示可勾选,false 表示不可勾选。
  • 显示操作按钮的属性:(并增加编辑 以及删除)
    menu: true,
    menuWidth: 240,
    menuAlign: ‘left’,
    delBtn: true,


    截图如下:

    在这里插入图片描述
  • 对于序号以及序号标题的自定义:
    index: true,
    indexLabel:‘标题’,


    截图如下:

    在这里插入图片描述
  • 对于这个属性:stripe:true, ,会将整个excel报表渲染成灰白相间,形成斑马纹
    在这里插入图片描述
  • 对于这个属性:selection:true, 表示开启多选功能
    在这里插入图片描述

博友回馈saveBtnText属性不生效,最后测试一番,可以生效的!

截图如下:
在这里插入图片描述

截图如下:

在这里插入图片描述

对于这类属性还有很多

editBtnText:'编辑文案',
viewBtnText:'查看文案',
printBtnText:'打印文案',
excelBtnText:'导出文案',
updateBtnText:'修改文案',
saveBtnText:'保存文案',
cancelBtnText:'取消文案',

2. 列属性

以下是对其中列属性的解释和补充说明:

label: 列名称, //用于显示在表头的列标题。

prop: 列字段,  //对应数据源中的字段名。

eg:

column: [
         {
           label: "码农工单号",
           prop: "orderNo"
         },
........

类似如下界面:

在这里插入图片描述

对应还有其他属性,补充如下:

placeholder: '请输入提示',  //控件提示输入语句,当表单元素为空时显示的文本。

align:'center',  //列的对齐方式,覆盖表格的整体对齐方式。 可以选择left/center/right

width: 100,    //列宽度,指定该列的宽度大小。

minWidth: 'auto',   //列的最小宽度,当列内容过短时,不会小于这个宽度。

sortable: false,   //是否允许排序该列的内容。

hide: true,   //是否隐藏该列,在表格中起作用。

search: false,   //是否支持搜索,通常用于表格中的搜索功能。

multiple: false,   //是否允许多选,当表单元素类型为选择框(select/tree)时。

format: "",   //显示值的时间格式,用于显示时间的列。

valueFormat: "",   //真实值的时间格式,用于提交表单时的时间格式,比如timestamp表示时间戳

clearable: true,   //表单是否可清空。

props: {
         label: 'xx',
         value: 'xx'
       },    //	数据字典属性的配置对象,具体参考Props参考配置

size: 'medium',   //表单大小,包括medium(中)、small(小)、mini(迷你)。

editDisabled: false,     //表单编辑时是否禁止

editDisplay: false,     //表单编辑是否可见

addDisabled: false,    //表单编辑时是否禁止

addDisplay: false,    //表单编辑是否可见

rules:[{}],    //表单规则,参考 Ele 表单规则配置对象。

dicData: [],   //静态字典数据,传入本次需要的静态字典,以列的 dicData 写对象 key 值自动加载。

dicUrl: '/xx/xx',   //字典的网络请求接口,支持参数格式,以列的 dicData 自动匹配 prop 字段名。

span: 10,   //表单栅格列数,用于表单中设置元素所占用的栅格数。

precision: 2,  //数字框输入精度,当表单元素类型为数字时,表示小数点后的位数。

maxRows: 4,    //最大行数,当表单元素类型为文本域(textarea)时,表示文本域的最大行数。

minRows: 2,   //最小行数,同上,表示文本域的最小行数。

slot:    //是否启用列自定义,支持自定义列内容。

formslot:    //是否启用表单自定义。

fixed:     //是否冻结列,使得该列在水平滚动时保持固定位置。

formWidth:    //表单宽度。

formHeight:    //表单行高度。

dicMethod:     //传入字典的请求方式。

dicQuery:    //传入字典的请求参数对象。

overHidden:   //是否超出隐藏,超出宽度时是否隐藏内容。
  • 上述中对应的search: true在页面中会配合搜索框进行显示,扩充其框大小可多补充一个searchSpan:10,如图所示:

在这里插入图片描述

  • 结合type属性,加入multiple: true,对应是可以多选的
    在这里插入图片描述
  • 结合时间,显示时间格式,具体如下:
    type: “datetime”,
    format: “yyyy-MM-dd HH:mm:ss”,
    valueFormat: “timestamp”,


    截图如下:

    在这里插入图片描述
  • 对应的rule规则,大致可通过如下设置:
rules: [{
        required: false,
        message: "请输入码农工单号",
        trigger: "blur"
      }],
  • 对应的dicUrl链接可通过如下进行使用:dicUrl: ${baseUrl}/info/queryAll,
  • 区分placeholdertip属性

代码如下:

placeholder:'1.02',
tip:'注: 日期1月2号,则输入 1.02',

截图如下:
在这里插入图片描述

  • 区分format以及valueFormat的格式:
format: "M-dd",
valueFormat: "yyyy-MM-dd",

format是显示的日期,valueFormat是格式标准,可以是"yyyy-MM-dd",或者"yyyy-MM-dd HH:mm:ss",

其中rulers还有一个验证参数:validator
比如开始时间和完成时间,具体范围选择如下:

{
  label: "开始维修时间",
  prop: "beginRepareTime",
  rules: [{
    validator:vOperateBeginTime,
    trigger: "blur"
  }],
  type: "datetime",
  format: "yyyy-MM-dd HH:mm",
  addDisplay:false,
},
{
  label: "完成时间",
  prop: "repareTime",
  rules: [{
    validator:vOperateRepareTime,
    trigger: "blur"
  }],
  type: "datetime",
  format: "yyyy-MM-dd HH:mm",
  addDisplay:false,
},

对应的validator参数对应的是他们两者的方法

export default {
    components: {ElDialog},
    data() {
      //维修完成时间的校验
      var vOperateRepareTime =(rule, value, callback)=>{
        var _this = this;
        if (!value) {
          return callback(new Error('完成时间不能为空'));
        }
        if(Date.parse(_this.formModelOperation.beginRepareTime)>Date.parse(value)){
          return callback(new Error('完成时间不能小于开始时间'));
        }
        return callback();
      };
      //维修开始时间的校验
      var vOperateBeginTime =(rule, value, callback)=>{

        var _this = this;
        if (!value) {
          return callback(new Error('完成时间不能为空'));
        }
        if(Date.parse(value)>Date.parse(_this.formModelOperation.repareTime)){
          return callback(new Error('开始时间不能大于完成时间'));
        }
        return callback();
      };

3. 互补

一般两者都是互补使用

比如增加一个搜索按钮,需要在表格属性中增加:

option: {
  height:'auto',
  calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: true,
  index: false,
  viewBtn: true,
  selection: false,
  dialogClickModal: false,
  menu:false,
  addBtn:true,
  highlightCurrentRow: true,

截图如下:
在这里插入图片描述

对应的列属性:

column: [
  {
    label: "工单编号",
    prop: "orderNo",
    rules: [{
      required: true,
      message: "请输入工单编号",
      trigger: "blur"
    }],
    search:true,
    addDisplay:false,
  },

截图如下:

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3022.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!