技术标签: 前端 UI组件库 html vue.js javascript
1.表格option配置项
<avue-crud
:option="option"
ref="crud"
//表格常用事件
@on-load="getList"//这个事件会在表格所在的组件加载时就会执行后面的getList方法,初始化表格数据。并且当表格翻页或者pageSize变化时候也会自动执行该方法,这时候表格绑定的 :page.sync="page"中的page的值也会随时更新,当页面大小变化时,还会自己将页面变为1 如果使用了这个方法 其实表格的 @current-change @size-change两个事件处理函数就不需要了 翻页事件全在on-load里面处理了
@current-change="事件处理函数"//表格翻页的页码发生变化时,并且事件处理函数里面第一个参数就是翻页的页码
@size-change="pageSizeChange"//表格翻页每页显示条数变化时触发,并且事件处理函数里面第一个参数就是当前的size大小
@search-change="searchChange"//表格搜索 事件处理函数默认有两个参数 form与done 第一个为搜索框的值 第二个为关闭搜索的刷新状态
@row-save="rowSave"//表格新增表单确定按钮的回调,注意:事件处理函数rowSave默认有三个参数分别为:row,done,loading,row是表单的值,done用于关闭表单
@row-update="rowUpdate" //表格行编辑的回调,改事件处理含数默认四个参数 row,index,done,loading
@row-del="rowDel"//表格操作行删除按钮回调,事件处理函数接受两个参数,row,index 。row是表单数据,index是当前数据所在表格行的索引
@refresh-change="refreshChange" //表格的刷新按钮的回调,这个函数默认自己不带参数
@current-row-change="handleCurrentRowChange"//表格行被点击时的回调,回调函数的第一个参数是当前被点击行的数据
@tree-load="treeLoad"//表格行展开的懒加载回调,回调函数自带三个参数 row, treeNode,resolve row:当前展开行的数据 treeNode:展开行节点数据 resolve:行懒加载的成功回调,在resolve里面将懒加载的数据传出去表格进行渲染 回调函数大致写法如下:
// 表格展开懒加载回调
treeLoad(row, treeNode,resolve) {
this.tjjcode = row.code
//重新调用getStatData方法获取数据,在resolve里面将新数据传递出去供表格渲染子节点
getStatData(this.deptId.id,this.tjjcode).then(res=> {
let list = res.data.data;
resolve(list);
});
},
>
</avue-crud>
//表格option配置
option:{
title:'表格的标题',
:table-loading = "tableLoading"//表格的状态(刷新、非刷新)
align:'center', // 表格列齐方式
menuAlign:'center', // 菜单栏对齐方式
excelBtn: true,//表单导出按钮
columnBtn:false, //列动态显隐按钮
refreshBtn:false, // 刷新按钮
saveBtn:false, // 新增表单的保存按钮;
updateBtn:false, // 更新按钮
emptyBtn:false//搜索清空按钮
addBtn:false, // 表格新增按钮
expand: true//设置表格行可展开 注意:一般懒加载开启就不设置expand为true expand:true会在表格第一列前面自己加一列放展开箭头类似于序号列那样 不加的话不会多产生一列 就在数据第一列有一个下拉箭头 样式稍微美观一点 所以一般不加 expand:true的设置
lazy:true,//开启行展开懒加载
rowKey:'code',// 表格行可展开的key 表格行展开必须设置rowKey
accordion:true,//同级节点只展开一个 另外的收起
menu: false,//表格操作列关闭、开启(查看 编辑...)
menuFixed:'left',//表格操作列是否冻结(true/false/left-操作列在表格左边/right-操作列在表格右边)
cancelBtn:false, // 行内查看取消按钮
viewBtn: true,//行内查看按钮
delBtn:false, // 行内删除按钮
editBtn:false, // 行内编辑按钮
index:true,//开启索引(序号)
indexLabel:'序号',//并将索引字段设置为“序号”
indexFixed:false,//设置序号列是否冻结
selection:true,//开启勾选功能
tip: false,//行可选情况下的选中提示
reserveSelection:true,//可选情况下保留之前的勾选(来回翻页勾选不丢失)
menuWidth: 150,//表格操作列宽度
searchMenuSpan:4,//搜索菜单栏的栅格宽度(整个搜索栏包括input框 按钮整个菜单栏的宽度)
column:[]//表格的表头配置 详见: 2、表头column配置
}
//表格一些自定义按钮操作
1、导出自定义按钮
this.$refs.crud.rowExcel(); //通过refs拿到原生rowExcel方法 调用可弹出下载的弹框点击弹框的下载按钮即可实现导出
2、表头column配置
// 表头配置
column: [{
label: '题库期数',//列显示的名称
prop: 'pernumber',//列依赖的数据字段
search: true,//开启当前行数据可搜索
searchValue: "搜索默认值",//搜索的默认值
addDisplay:false,//当前行数据在新增表单中是否可见
addDisabled:false,//当前行数据在新增表单中是否可编辑
editDisplay:false,//当前行数据在编辑表单中是否可见
editDisabled:true//当前行数据在编辑表单中是否可编辑
overHidden: true,//超出省略号显示
sortable: true,//开启表格排序
hide: true,//隐藏列(在表格展示中隐藏 但是会在新增表单中显示 这一条可以解决表格不展示新增需要添加数据的,情况,解决掉往新增表单插入插槽的情况)
type:"password / textarea/checkbox/select" //type为password可隐藏密码/type为textarea为文本编辑在新增、修改表单是可拉伸的文本编辑框不是简单的input框 checkbox:新增表单是复选框 select:搜索、新增表单会是下拉框,下拉选项结合下面的dic配置项实现
filterable:true, //在表单为select状态时 可键盘输入进行筛选选择项
allowCreate:true, //结合上面的filterable配置可以使select选框为可输入状态 可以键入没有的选择项 并新键入的选择项可拱选择
defaultFirstOption:true//在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用
dicData:[{
label:"密码授权",
value:"password"
}],//数据字典 type设置为checkbox或者select的时候结合dic配置来展示选框的值 这是静态的写法 匹配上value后当前选框的lable就是密码授权。同时在表格展示上,也会自动匹配数据字典的label进行展示,无需再使用插槽通过v-if判断该项的值再展示对应的内容 数据字典是一种常用的思想
// dicUrl: '/admin/dict/type/grant_types',//type设置为checkbox的时候除了上面静态的写法外,也可以获取服务端的动态数据字典
multiple:true //当type为select时,设置是否多选
disabled:true //禁用编辑
rules: [//设置但当前列表单验证
{
required: true,message: "请输入姓名",trigger: "blur"},
{
min: 2,max:6,message: "请输入2-6个字符之间"},
]
},
{
label: '状态',
prop: 'status',
formslot: true,//自定义表单开关项
type:select,//表单呈现效果为下拉框
}
]
3、使用插槽向表单(新增表单、修改表单、搜索表单)中插入内容
1、avue自带新增表单、修改表单、搜索变淡,已经为我们封装好了
2、会将column中配置了的字段在表单中展示出来
2、在使用的时候我们经常需对表单做一些自定义的东西
3、下面记录一下在工作中用到的一些方法 方便日后使用的时候直接查找
一、设置表单中某一字段输入框为一个下拉框
1、可以自己设置某一字段是下拉框、还是input框 还是其他形式
2、下面以column中的 状态(status)字段为例
3、自定义表单形式 需要使用到插槽 所以 必须要先在column中设置该字段的 fromslot:true 详见:表头column配置
4、除了使用插槽方式外 还有更加简便的方法 直接在column中配置 type:select 表单就是下拉框了
<avue-crud>
//内部使用插槽 插入下拉框
<template slot="statusForm"> //注意:slot名字必须要是prop的属性值+Form 即:statusForm
<avue-select/>
</template>
<avue-crud>
二、向表单中插入一个额外的输入框
1、此时的插槽名字为:menuForm
<template slot="menuForm">
<el-form-item label="维修状态">
<el-input placeholder="维修状态" v-model="search.value"/>
</el-form-item>
</template>
三、向表单中插入一个自定义的按钮 例如文件上传
1、此时插槽的名字依然为:menuForm
<template slot="menuForm">
<el-upload
style="display: inline-block; margin-left: 10px"
ref="upload"
:limit="1"
action="/api/blade_basic/company/import-company"
:data="{ isCovered: 1 }"
:on-success="uploadSuccess"
:on-progress="uploadprogress"
>
<el-button type="success" size="small" icon="el-icon-plus">导入数据</el-button>
</el-upload>
</template>
四、向搜索表单插入内容
1、向搜索表单插入一个额外的(column中没有的字段)输入框
2、此时的插槽名字为:search
<template slot="search">
<el-form-item label="维修状态">
<el-input placeholder="维修状态" v-model="search.value"/>
</el-form-item>
</template>
原文引用自:https://blog.csdn.net/fsfsdgsdg/article/details/121966281
文章浏览阅读748次。总结起来大概有5种做法:将要处理的文字写到一个资源文件,如string.xml(使用html用法格式化)当文字中出现URL、E-mail、电话号码等的时候,可以将TextView的android:autoLink属性设置为相应的的值,如果是所有的类型都出来就是**android:autoLink="all",当然也可以在java代码里 做,textView01.setAutoLinkMask(Li..._qaction::settext 无法添加下划线
文章浏览阅读6.3k次,点赞2次,收藏10次。摘要: 背景 随着近几年物联网的发展,时序数据迎来了一个不小的爆发。从DB-Engines上近两年的数据库类型增长趋势来看,时序数据库的增长是非常迅猛的。在去年我花了比较长的时间去了解了一些开源时序数据库,写了一个系列的文章(综述、HBase系、Cassandra系、InfluxDB、Prometheus),感兴趣的可以浏览。背景随着近几年物联网的发展,时序数据迎来了一个不小的爆发。从DB..._tablestore 时间类型处理
文章浏览阅读5.7k次,点赞8次,收藏49次。可以编译成功但是运行时段错误查找原因应该是ROS noetic版本中自带的OpenCV4和VINS-mono中需要使用的OpenCV3冲突的问题。为了便于查找问题,我只先编译feature_tracker包。解决思路历程:o想着把OpenCV4相关的库移除掉,但是发现编译feature_tracker的时候仍然会关联到Opencv4的库,查找原因是因为cv_bridge是依赖opencv4的,这样导致同时使用了opencv3和opencv4,因此运行出现段错误。oo进一步想着(1)把vins-mon_uabntu20.04安装vins-mono
文章浏览阅读3.6k次,点赞3次,收藏12次。创龙TL6748开发板中,EMIFA模块使用默认的PLL0_SYSCLK3时钟,使用AISgen for D800K008工具加载C6748配置文件C6748AISgen_456M_config(Configuration files,在TL_TMS6748/images文件夹下),由图可以看到DIV3等于4,注意这里的DIV3就是实际的分频值(x),而不是写入相应PLL寄存器的值(x-1)。_tms 6748
文章浏览阅读5.9k次,点赞4次,收藏13次。转载请说明出处:eigen稀疏矩阵拼接(块操作)eigen稀疏矩阵拼接(块操作)关于稀疏矩阵的块操作:参考官方链接 However, for performance reasons, writing to a sub-sparse-matrix is much more limited, and currently only contiguous sets of columns..._稀疏矩阵拼接
文章浏览阅读946次,点赞19次,收藏19次。波束形成是天线阵列信号处理中的一项关键技术,它通过对来自不同方向的信号进行加权求和,来增强特定方向的信号并抑制其他方向的干扰。本文介绍了两种基于 Capon 和信号子空间的变形算法,即最小方差无失真响应 (MVDR) 算法和最小范数算法,用于实现波束形成。这些算法通过优化波束形成权重向量,来最小化波束形成输出的方差或范数,从而提高波束形成性能。引言波束形成在雷达、声纳、通信和医学成像等众多应用中至关重要。它可以增强目标信号,抑制干扰和噪声,提高系统性能。
文章浏览阅读3.4w次。转自:http://www.linuxidc.com/Linux/2017-07/145335.htm使用Ubuntu开发已经有些时间了。写下这篇文章,希望记录下这一年的小小总结。使用Linux开发有很多坑,同时也有很多有趣的东西,可以编写一些自动化脚本,添加定时器,例如下班定时关机等自动化脚本,同时对于服务器不太了解的朋友,建议也可以拿台Linux来实践下,同时Ubuntu在Androi_ubuntu开发推荐软件
文章浏览阅读2.2k次。一,问题 nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递到应用程序中。二,解决 Nginx服务器增加转发配置 proxy_set_header Host $host;_nginx获取到的是交换机的ip
文章浏览阅读1.4k次。Wireshark TCP数据包跟踪 还原图片 WinHex简单应用 _wireshark抓包还原图片
文章浏览阅读1.5k次。Win8下安装VS2012时,蓝屏,报错WHEA_UNCORRECTABLE_ERROR(P.S.新的BSOD挺有创意":("),Google之,发现[via]需要BIOS中禁用Intel C-State,有严重Bug的嫌疑哦原因有空再看看..._win8.1 whea_uncorrectable_error蓝屏代码
文章浏览阅读919次,点赞21次,收藏22次。科大讯飞是一家专业从事智能语音及语音技术研究、软件及芯片产品开发、语音信息服务的软件企业,语音技术实现了人机语音交互,使人与机器之间沟通变得像人与人沟通一样简单。语音技术主要包括语音合成和语音识别两项关键技术。此外,语音技术还包括语音编码、音色转换、口语评测、语音消噪和增强等技术,有着广阔的应用。_科大讯飞培训案例
文章浏览阅读4.7k次。Perl是一个高阶程式语言,由 Larry Wall和其他许多人所写,融合了许多语言的特性。它主要是由无所不在的 C语言,其次由 sed、awk,UNIX shell 和至少十数种其他的工具和语言所演化而来。Perl对 process、档案,和文字有很强的处理、变换能力,ActivePerl是一个perl脚本解释器。其包含了包括有 Perl for Win32、Perl for ISAPI、PerlScript、Perl。_perl下载