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

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

子类和父类存在同名函数的时候。

#问题描述 在学习别人的code的时候,往往存在子类和父类,发现子类和父类存在同名函数,并且父类中改该方法是异常触发,如果子类的该方法有具体的执行内容的话, 其实是可以执行子类的方法,而不执行父类方法。…

【Javascript】函数声明的方式

方式一: function c(a,b){return ab;}var sumc(3,4);console.log(sum); 方式二: var afunction (a,b){return ab;}; console.log(a(1,3)); 方式三: 构造声明 var cnew Function (a,b,return ab); console.log(c(1,2));声明函数过程中&…

BUUCTF刷题记录

[BJDCTF2020]Easy MD51 进入题目页面,题目提示有一个链接,应该是题目源码 进入环境,是一个查询框,无论输入什么都没有回显,查看源码也没什么用 利用bp抓包查看有没有什么有用的东西 发现响应的Hint那里有一个sql语句&…

Visual Studio 2022 设置 PySide6 扩展工具

前言 本人不想电脑上装一堆的IDE,所以把 Python 开发也交给了 Visual Studio,如果你不是用 Visual Studio 做 Python 开发,下文就不用看了。 PySide简介 PySide跟PyQt类似,都是支持Python的Qt包,不同的是,PyQt是第三方的,PySide是Qt官方的。 PySide的推出比PyQt晚很…

设备管理软件管理系统

从设备检查到设备保养,再到设备维护,全方位视角掌握设备状态的管理软件。让企业员工可以随时随地的查看设备的各种信息:巡检信息、保养计划、备件更换提醒、维修保养资料等。 1、一物一码,建立设备电子档案“身份证” 精准管控每一…

如何通过内网穿透实现公网远程连接Redis数据库

公网远程连接Redis数据库【内网穿透】 文章目录 公网远程连接Redis数据库【内网穿透】前言1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址…

Java 使用 poi 和 aspose 实现 word 模板数据写入并转换 pdf 增加水印

本项目所有源码和依赖资源都在文章顶部链接,有需要可以下载使用 1. 需求描述 从指定位置读取一个 word 模板获取业务数据并写入该 word 模板,生成新的 word 文档将新生成的 word 文档转换为 pdf 格式对 pdf 文档添加水印 2. 效果预览 word 模板 带水印的…

随笔:使用Python爬取知乎上相关问题的所有回答

项目中数据分析的需要自己从知乎某个专门的问题上爬数据,但众所周知,知乎的问题的显示方式有点胃疼(指滑动后下翻加载更多回答,还经常卡住),翻了翻网上的教程发现有的要么就是很老了要么就是付费的&#xf…

【详细】Java网络通信 TCP、UDP、InetAddress

一、网络程序设计基础 1.局域网与因特网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机&#xff08;服务器<-->网络<-->客户机&#xff09;。 服务器是指提供信息的计算机或程序&#xff0c;客户机是指请求信息的计算机或程序。网络用…

基于java+swing+mysql实现的仓库商品管理系统

JavaSwingmysql用户信息管理系统 一、系统介绍二、功能展示三、项目相关3.1 乱码问题3.2 如何将GBK编码系统修改为UTF-8编码的系统&#xff1f; 四、其它1.其他系统实现 五、源码下载 一、系统介绍 本系统实现了两个角色层面的功能&#xff0c;管理员可以管理用户、仓库、商品…

Pinia中如何实现数据持久化操作

使用vue3中的pinia&#xff0c;我们可以在多个页面间共享数据&#xff0c;但是一旦我们关闭或刷新页面&#xff0c;这些数据就会丢失&#xff0c;因此&#xff0c;我们需要有一种数据持久化的解决方案。在记录vue3 使用vue3中的pinia&#xff0c;我们可以在多个页面间共享数据&…

一体化运维监控:数据中心运维可视化的指挥中枢

在当今数字化世界中&#xff0c;数据中心的运维管理对于企业的稳定运营至关重要。然而&#xff0c;传统的运维管理方式往往面临着许多挑战&#xff0c;如多系统整合困难、运维效能低下等。为此&#xff0c;监控易品牌推出了一体化运维管理软件&#xff0c;旨在构建数据中心可视…

【App 抓包提示网络异常怎么破?】

背景 当你测试App的时候,想要通过Fiddler/Charles等工具抓包看下https请求的数据情况,发现大部分的App都提示网络异常/无数据等等信息。以“贝壳找房”为例: 455 x 705 Fiddler中看到的请求是这样的: 619 x 215 你可能开始找证书的问题:是不是Fiddler/Charles的证书没有…

sqlalchemy的部分函数合集

func.concat func.group_concat func.find_in_set func.sum func.left func.month func.round func.avg func.rpad func.ifnull func.replace func.date_format CONCAT 函数&#xff1a;将两个或多个字符串连接在一起。例如&#xff1a; SELECT CONCAT(Hello, , World) AS r…

单元测试Testng

Test官网介绍 tentng官网 TestNG - Download Current Release and Beta Versions Maven <dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>7.6.1</version><scope>test</scope> …

数字化工厂:连接、集成与数据融合

随着科技的不断发展&#xff0c;数字化工厂管理系统逐渐成为制造业的重要趋势。数字化工厂的核心在于连接、集成与数据融合&#xff0c;通过这些技术手段&#xff0c;实现对设备、生产线、工厂、供应商、产品、客户等各个环节的全面优化&#xff0c;提升企业的生产效率和产品质…

NET-MongoDB的安装使用

一&#xff0e;下载 MongoDB 点击 Select package 选择自己所需版本后点击下载&#xff0c;本文选用Windows 6.0版本以上 二、配置MongoDB 在 Windows 上&#xff0c;MongoDB 将默认安装在 C:\Program Files\MongoDB 中。 将 C:\Program Files\MongoDB\Server\version_numbe…

安装python虚拟环境

什么是虚拟环境&#xff1a; 虚拟环境的意义&#xff0c;就如同 虚拟机 一样&#xff0c;它可以实现不同环境中Python依赖包相互独立&#xff0c;互不干扰。 环境准备 安装python &#xff08;到官网下载Download Python​配置环境变量&#xff0c;cmd进入命令行输入 python…

王道计网:数据链路层

一、导论 将网络层的数据报分组封装成帧。 本质上是数据链路层封装之后&#xff0c;在物理层传输bit流&#xff0c;中间站点又会向上到数据链路层&#xff0c;这是一个实际过程&#xff0c;但是在单独考虑数据链路层时&#xff0c;我们可以忽略经过的物理层&#xff0c;直接认为…

算法通关村|黄金挑战|K个一组进行反转

K个一组进行反转 1.头插法 public ListNode reverseKGroup(ListNode head, int k) {ListNode dummyNode new ListNode(0);dummyNode.next head;ListNode cur head;// 计算链表长度int len 0;while (cur ! null) {len;cur cur.next;}// 计算有几组int n len / k;ListNod…