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//隐藏
      }
    }

+ 范例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
}

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
可选值: 无
默认值: 无