文章目录
- 1.row-handle
- + columnHeader
- + width
- + minWidth
- + fixed
- + align
- + renderHeader
- + edit
- + view
- + remove
- + remove.confirm
- + remove.confirmTitle
- + remove.confirmText
- + custom
- + 范例1
- + 范例2
- 2.columns
- + title
- + key
- + width
- + minWidth
- + fixed
- + renderHeader
- + sortable
- + sortMethod
- + sortBy
- + sortOrders
- + resizable
- + formatter
- + showOverflowTooltip
- + align
- + headerAlign
- + className
- + labelClassName
- + filters
- + filterPlacement
- + filterMultiple
- + filterMethod
- + filteredValue
- + component.name
- + component.valueBinding
- 3.options
- + height
- + maxHeight
- + stripe
- + border
- + size
- + fit
- + showHeader
- + highlightCurrentRow
- + currentRowKey
- + rowClassName
- + rowStyle
- + cellClassName
- + cellStyle
- + headerRowClassName
- + headerRowStyle
- + headerCellClassName
- + headerCellStyle
- + rowKey
- + emptyText
- + defaultSort
- + tooltipEffect
- + showSummary
- + sumText
- + summaryMethod
- + spanMethod
- + selectOnIndeterminate
- + hide
- + fetchDetail
- + events
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=nullshow: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
可选值: 无
默认值: 无