• Vue-dvadmin-d2-crud-plus-常用配置-row-handle-columns-options



    dvadmin是一个快速开发的后台,能够快速实现数据的增删查改。下面就作者常遇到的配置进行解析。

    1.row-handle

    rowHandle:false 隐藏操作列

    + columnHeader

    说明: 操作列表头文字
    类型: String
    可选值: 无
    默认值: 操作

    + width

    说明: 操作列宽度
    类型: String
    可选值: 无
    默认值: 无

    + minWidth

    说明: 操作列最小宽度
    类型: String
    可选值: 无
    默认值: 无

    + fixed

    说明: 操作列固定列
    类型: String / Boolean
    可选值: true / left / right
    默认值: 无

    + align

    说明: 操作列对齐方式
    类型: String
    可选值: left / center / right
    默认值: left

    + renderHeader

    说明: 操作列 Label 区域渲染使用的 Function
    类型: Function (h, { column, $index })
    可选值: 无
    默认值: 无

    + edit

    说明: 编辑按钮 , 传入false不显示
    类型: Object | Boolean
    可选值: 无
    默认值: 无
    更多见后面:按钮详细配置

    + view

    说明: 查看按钮, 传入false不显示
    类型: Object | Boolean
    可选值: 无
    默认值: 无
    更多见后面:按钮详细配置

    + remove

    说明: 删除按钮, 传入false不显示
    类型: Object | Boolean
    可选值: 无
    默认值: 无
    更多见后面:按钮详细配置

    + remove.confirm

    说明: 是否弹出confirm框
    类型: Boolean
    可选值: 无
    默认值: 无

    + remove.confirmTitle

    说明: 删除confirm框的标题
    类型: String
    可选值: 无
    默认值: 无

    + remove.confirmText

    说明: 删除confirm框的文字
    类型: String
    可选值: 无
    默认值: 无

    + custom

    说明: 自定义按钮
    类型: Array
    可选值: 无
    默认值: 无

    + 范例1

    rowHandle: {
          width: 140,
          view: {
            thin: true,
            text: '',
            disabled () {
              return !vm.hasPermissions('Retrieve')
            }
          },
          edit: {//编辑按钮
            thin: true,
            text: '',
            disabled () {
              return false
              //return !vm.hasPermissions('Update')
            },
            show: false//隐藏
          },
          remove: {//删除按钮
            thin: true,
            text: '',
            hidden: true,
            disabled () {
              return false
              //return !vm.hasPermissions('Delete')
            },
            show: false//隐藏
          }
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    + 范例2

    edit:{
        thin: false, //瘦模式,thin=true 且 text=null 可以设置方形按钮节省位置 
        text: '编辑', //按钮文字, null= 取消文字
        //text(scope){return 'xx'}, //也可传入一个方法
        title: undefined, //鼠标停留的提示文字
        type: 'warning', // 按钮类型  可选值【primary / success / warning / danger / info / text】
        icon:'icon-edit', //按钮图标
        //icon(scope){return 'xx'}  //也可传入一个方法
        size: 'small', // 按钮大小
        circle: false,//圆形按钮 ,需要thin=true,且text=null
        show:true, // 是否显示按钮
        //show(index,row){return true}// 支持按条件显隐 
        disabled:false, // 是否禁用
        //disabled(index,row){return true} //支持按条件禁用启用 
        order: 1 //排序号,数字小,排前面,默认顺序:查看=1、编辑=2、删除=3、自定义=4
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2.columns

    + title

    说明: 表格列名
    类型: String
    可选值: 无
    默认值: 无

    + key

    说明: data 中对应列的键名
    类型: String
    可选值: 无
    默认值: 无

    + width

    说明: 对应列的宽度
    类型: String
    可选值: 无
    默认值: 无

    + minWidth

    说明: 对应列的最小宽度,与 width 的区别是 width 是固定的,minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列
    类型: String
    可选值: 无
    默认值: 无

    + fixed

    说明: 列是否固定在左侧或者右侧,true 表示固定在左侧
    类型: String / Boolean
    可选值: true / left / right
    默认值: 无

    + renderHeader

    说明: 列标题 Label 区域渲染使用的 Function
    类型: Function (h, { column, $index })
    可选值: 无
    默认值: 无

    + sortable

    说明: 对应列是否可以排序,如果设置为 ‘custom’,则代表用户希望远程排序,需要监听 Table 的 sort-change 事件
    类型: Boolean / String
    可选值: true, false, ‘custom’
    默认值: false

    + sortMethod

    说明: 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致
    类型: Function (a, b)
    可选值: 无
    默认值: 无

    + sortBy

    说明: 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推
    类型: String / Array / Function (row, index)
    可选值: 无
    默认值: 无

    + sortOrders

    说明: 数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序
    类型: array
    可选值: 数组中的元素需为以下三者之一:ascending 表示升序,descending 表示降序,null 表示还原为原始顺序
    默认值: [‘ascending’, ‘descending’, null]

    + resizable

    说明: 对应列是否可以通过拖动改变宽度(需要在 options 中设置 border 属性为 true
    类型: Boolean
    可选值: 无
    默认值: true

    + formatter

    说明: 用来格式化内容
    类型: Function (row, column, cellValue, index)
    可选值: 无
    默认值: 无

    + showOverflowTooltip

    说明: 当内容过长被隐藏时显示 tooltip
    类型: Boolean
    可选值: 无
    默认值: false

    + align

    说明: 对齐方式
    类型: String
    可选值: left / center / right
    默认值: left

    + headerAlign

    说明: 表头对齐方式,若不设置该项,则使用表格的对齐方式
    类型: String
    可选值: left / center / right
    默认值: 无

    + className

    说明: 列的 className
    类型: String
    可选值: 无
    默认值: 无

    + labelClassName

    说明: 当前列标题的自定义类名
    类型: String
    可选值: 无
    默认值: 无

    + filters

    说明: 数据过滤的选项,数组格式,数组中的元素需要有 text 和 value 属性。
    类型: Function ({ text, value })
    可选值: 无
    默认值: 无

    + filterPlacement

    说明: 过滤弹出框的定位
    类型: String
    可选值: top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
    默认值: bottom

    + filterMultiple

    说明: 数据过滤的选项是否多选
    类型: Boolean
    可选值: 无
    默认值: true

    + filterMethod

    说明: 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。
    类型: Function (value, row, column)
    可选值: 无
    默认值: 无

    + filteredValue

    说明: 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。
    类型: Array
    可选值: 无
    默认值: 无

    + component.name

    说明: 表格渲染的组件名,更多component参数
    类型: String
    可选值: 任何组件
    默认值: 无

    + component.valueBinding

    说明: value绑定属性,当component.name 配置的是一个无value属性的组件时(即非v-model组件),会将该cell的值赋值给该组件的指定属性
    类型: String | {prop:‘目标属性’,handle() }
    可选值: 组件的属性名
    默认值: 无
    示例:
    //下面示例可以在表格

    3.options

    支持el-table的参数

    + height

    说明: 表格的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 String 类型,则这个高度会设置为表格的 style.height 的值,表格的高度会受控于外部样式。
    类型: String / Number
    可选值: 无
    默认值: 无

    + maxHeight

    说明: 表格的最大高度
    类型: String / Number
    可选值: 无
    默认值: 无

    + stripe

    说明: 是否为斑马纹模式
    类型: Boolean
    可选值: 无
    默认值: false

    + border

    说明: 是否带有纵向边框
    类型: Boolean
    可选值: 无
    默认值: false

    + size

    说明: 表格的尺寸
    类型: String
    可选值: medium / small / mini
    默认值: 无

    + fit

    说明: 列的宽度是否自撑开
    类型: Boolean
    可选值: 无
    默认值: true

    + showHeader

    说明: 是否显示表头
    类型: Boolean
    可选值: 无
    默认值: true

    + highlightCurrentRow

    说明: 是否要高亮当前行
    类型: Boolean
    可选值: 无
    默认值: false

    + currentRowKey

    说明: 当前行的 key,只写属性
    类型: String / Number
    可选值: 无
    默认值: 无

    + rowClassName

    说明: 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。
    类型: Function ({row, rowIndex}) / String
    可选值: 无
    默认值: 无

    + rowStyle

    说明: 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
    类型: Function ({row, rowIndex}) / Object
    可选值: 无
    默认值: 无

    + cellClassName

    说明: 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。
    类型: Function ({row, column, rowIndex, columnIndex}) / String
    可选值: 无
    默认值: 无

    + cellStyle

    说明: 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
    类型: Function ({row, column, rowIndex, columnIndex}) / Object
    可选值: 无
    默认值: 无

    + headerRowClassName

    说明: 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。
    类型: Function ({row, rowIndex}) / String
    可选值: 无
    默认值: 无

    + headerRowStyle

    说明: 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
    类型: Function ({row, rowIndex}) / Object
    可选值: 无
    默认值: 无

    + headerCellClassName

    说明: 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。
    类型: Function ({row, column, rowIndex, columnIndex}) / String
    可选值: 无
    默认值: 无

    + headerCellStyle

    说明: 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
    类型: Function ({row, column, rowIndex, columnIndex}) / Object
    可选值: 无
    默认值: 无

    + rowKey

    说明: 行数据的 Key,用来优化表格的渲染;在使用 reserveSelection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 function。
    类型: Function (row) / String
    可选值: 无
    默认值: 无

    + emptyText

    说明: 空数据时显示的文本内容
    类型: String
    可选值: 无
    默认值: 无

    + defaultSort

    说明: 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序
    类型: Object
    可选值: order: ascending / descending
    默认值: 如果只指定了 prop, 没有指定order, 则默认顺序是 ascending

    + tooltipEffect

    说明: tooltip effect 属性
    类型: String
    可选值: dark / light
    默认值: 无

    + showSummary

    说明: 是否在表尾显示合计行
    类型: Boolean
    可选值: 无
    默认值: false

    + sumText

    说明: 合计行第一列的文本
    类型: String
    可选值: 无
    默认值: 合计

    + summaryMethod

    说明: 自定义的合计计算方法
    类型: Function ({ columns, data })
    可选值: 无
    默认值: 无

    + spanMethod

    说明: 合并行或列的计算方法
    类型: Function ({ row, column, rowIndex, columnIndex })
    可选值: 无
    默认值: 无

    + selectOnIndeterminate

    说明: 在多选表格中,当仅有部分行被选中时,点击表头的多选框时的行为。若为 true,则选中所有行;若为 false,则取消选择所有行
    类型: Boolean
    可选值: 无
    默认值: true

    + hide

    说明: 是否隐藏表格,通过body插槽自定义table
    类型: Boolean
    可选值: 无
    默认值: false

    + fetchDetail

    说明: 打开编辑框前请求后台获取完整数据
    类型: Function
    可选值: 无
    默认值: 无

    + events

    说明: 监听el-table事件
    类型: Object
    可选值: 无
    默认值: 无

  • 相关阅读:
    Laravel定时任务
    DBA_IND_STATISTICS 字段含义
    python使用flask实现前后端分离&通过前端修改数据库数据【全栈开发基础】
    【Java】Spring scruity 简单上手
    《你好,C语言》:从另一个视角学习并重新审视C语言的意义
    BIGEMAP在土地规划中的应用
    shell脚本自动化执行jar包
    尤雨溪:Vue 3 将成为新的默认版本
    2022年金九银十Java面试宝典,横扫春招+社招+秋招
    elasticSearch学习笔记
  • 原文地址:https://blog.csdn.net/m0_67316550/article/details/134003494