【vue】avue |
您所在的位置：网站首页 › 表格可选文字属性标题的设置方法是 › 【vue】avue |
【vue】avue
|
目录
前言1. 表格属性2. 列属性3. 互补
前言
项目实战中需要调某个样式，但作为后端开发者也只能硬着头皮，此贴作为初学前端的第一帖，以下为学习笔记。 对应form属性文档可看这篇文章：form属性文档对应curd属性文档可看这篇文章：curd属性文档 1. 表格属性以下是对其中表格属性的解释和补充说明： menu:true, //是否显示操作菜单栏，设置为 true 表示显示，false 表示不显示。 menuTitle:"操作栏标题", //改变操作栏标题，自定义操作菜单栏的标题。 menuWidth:240, //操作菜单栏的宽度。 menuAlign:'left', //菜单栏对齐方式，可以设置为 'left'、'center' 或 'right'。 addBtn:true, //是否显示添加按钮，用于在表格中添加数据。 searchBtn:true, //是否显示搜索显隐按钮，当表格列中有搜索的属性或 searchslot 为 true 时，自定义搜索按钮起作用。 editBtn:true, //是否显示行内编辑按钮，用于编辑表格中的行数据。 delBtn:true, //是否显示行删除按钮，用于删除表格中的行数据。 width:'100%', //表格宽度，可以设置为百分比或具体数值，用于定义表格的宽度大小。 calcHeight:'auto', //表格高度差，主要用于减去其他部分，以便让表格高度自适应。 height:'auto', //表格高度，可以设置为具体数值或 'auto'，用于定义表格的固定高度。 maxHeight:'auto', //表格最大高度，可以设置为具体数值或 'auto'，用于限制表格的最大高度。 border:true, //是否显示表格边框，设置为 true 表示显示，false 表示不显示。 expand:true, //是否展开折叠行，设置为 true 表示允许展开折叠行，false 表示不展开。 index:true, //是否显示表格序号，根据分页会自动计算，例如每页10行，第二页会从11开始计数。 indexLabel:'xx', //序号的标题，可以自定义。 stripe:true, //是否显示表格的斑马条纹，设置为 true 表示显示，false 表示不显示。默认为false showHeader:true, //是否显示表格的表头，设置为 true 表示显示，false 表示不显示。默认就是true defaultSort: //表格的默认排序字段，包括 prop（默认排序字段）和 order（排序方式，'descending' 或 'ascending'）。 align:'center', //表格列对齐方式，可以设置为 'left'、'center' 或 'right'。 searchSize:'small', //搜索控件的大小，可以设置为 'small' 或 'mini'。 columnBtn:true, //是否显示列显隐按钮，用于显示或隐藏表格的列。 refreshBtn:true, //是否显示刷新按钮，用于刷新表格数据。 labelWidth:100, //新增表单的 label 宽度。 highlightCurrentRow:true, //true 选中这一行的时候会高亮，默认为false selection:true, //是否显示勾选列，用于显示表格中的勾选列。 selectable: //根据条件判断该行是否能被勾选的函数，接收行数据和索引作为参数，返回 true 表示可勾选，false 表示不可勾选。 显示操作按钮的属性：（并增加编辑 以及删除） menu: true, menuWidth: 240, menuAlign: ‘left’, delBtn: true, 截图如下： 对于序号以及序号标题的自定义： index: true, indexLabel:‘标题’, 截图如下：  对于这个属性：stripe:true, ，会将整个excel报表渲染成灰白相间，形成斑马纹  对于这个属性：selection:true, 表示开启多选功能 
博友回馈saveBtnText属性不生效，最后测试一番，可以生效的！ 截图如下： 截图如下：
对于这类属性还有很多 editBtnText:'编辑文案', viewBtnText:'查看文案', printBtnText:'打印文案', excelBtnText:'导出文案', updateBtnText:'修改文案', saveBtnText:'保存文案', cancelBtnText:'取消文案', 2. 列属性以下是对其中列属性的解释和补充说明： label: 列名称, //用于显示在表头的列标题。 prop: 列字段, //对应数据源中的字段名。eg： column: [ { label: "码农工单号", prop: "orderNo" }, ........类似如下界面：
对应还有其他属性，补充如下： placeholder: '请输入提示', //控件提示输入语句，当表单元素为空时显示的文本。 align:'center', //列的对齐方式，覆盖表格的整体对齐方式。 可以选择left/center/right width: 100, //列宽度，指定该列的宽度大小。 minWidth: 'auto', //列的最小宽度，当列内容过短时，不会小于这个宽度。 sortable: false, //是否允许排序该列的内容。 hide: true, //是否隐藏该列，在表格中起作用。 search: false, //是否支持搜索，通常用于表格中的搜索功能。 multiple: false, //是否允许多选，当表单元素类型为选择框（select/tree）时。 format: "", //显示值的时间格式，用于显示时间的列。 valueFormat: "", //真实值的时间格式，用于提交表单时的时间格式，比如timestamp表示时间戳 clearable: true, //表单是否可清空。 props: { label: 'xx', value: 'xx' }, // 数据字典属性的配置对象，具体参考Props参考配置 size: 'medium', //表单大小，包括medium（中）、small（小）、mini（迷你）。 editDisabled: false, //表单编辑时是否禁止 editDisplay: false, //表单编辑是否可见 addDisabled: false, //表单编辑时是否禁止 addDisplay: false, //表单编辑是否可见 rules:[{}], //表单规则，参考 Ele 表单规则配置对象。 dicData: [], //静态字典数据，传入本次需要的静态字典，以列的 dicData 写对象 key 值自动加载。 dicUrl: '/xx/xx', //字典的网络请求接口，支持参数格式，以列的 dicData 自动匹配 prop 字段名。 span: 10, //表单栅格列数，用于表单中设置元素所占用的栅格数。 precision: 2, //数字框输入精度，当表单元素类型为数字时，表示小数点后的位数。 maxRows: 4, //最大行数，当表单元素类型为文本域（textarea）时，表示文本域的最大行数。 minRows: 2, //最小行数，同上，表示文本域的最小行数。 slot: //是否启用列自定义，支持自定义列内容。 formslot: //是否启用表单自定义。 fixed: //是否冻结列，使得该列在水平滚动时保持固定位置。 formWidth: //表单宽度。 formHeight: //表单行高度。 dicMethod: //传入字典的请求方式。 dicQuery: //传入字典的请求参数对象。 overHidden: //是否超出隐藏，超出宽度时是否隐藏内容。 上述中对应的search: true在页面中会配合搜索框进行显示，扩充其框大小可多补充一个searchSpan:10,如图所示：
 结合时间，显示时间格式，具体如下： type: “datetime”, format: “yyyy-MM-dd HH:mm:ss”, valueFormat: “timestamp”, 截图如下：  对应的rule规则，大致可通过如下设置：
rules: [{
required: false,
message: "请输入码农工单号",
trigger: "blur"
}],
对应的dicUrl链接可通过如下进行使用：dicUrl: ${baseUrl}/info/queryAll,区分placeholder和tip属性
代码如下： placeholder:'1.02', tip:'注: 日期1月2号,则输入 1.02',截图如下： format是显示的日期，valueFormat是格式标准，可以是"yyyy-MM-dd",或者"yyyy-MM-dd HH:mm:ss", 其中rulers还有一个验证参数：validator 比如开始时间和完成时间，具体范围选择如下： { label: "开始维修时间", prop: "beginRepareTime", rules: [{ validator:vOperateBeginTime, trigger: "blur" }], type: "datetime", format: "yyyy-MM-dd HH:mm", addDisplay:false, }, { label: "完成时间", prop: "repareTime", rules: [{ validator:vOperateRepareTime, trigger: "blur" }], type: "datetime", format: "yyyy-MM-dd HH:mm", addDisplay:false, },对应的validator参数对应的是他们两者的方法 export default { components: {ElDialog}, data() { //维修完成时间的校验 var vOperateRepareTime =(rule, value, callback)=>{ var _this = this; if (!value) { return callback(new Error('完成时间不能为空')); } if(Date.parse(_this.formModelOperation.beginRepareTime)>Date.parse(value)){ return callback(new Error('完成时间不能小于开始时间')); } return callback(); }; //维修开始时间的校验 var vOperateBeginTime =(rule, value, callback)=>{ var _this = this; if (!value) { return callback(new Error('完成时间不能为空')); } if(Date.parse(value)>Date.parse(_this.formModelOperation.repareTime)){ return callback(new Error('开始时间不能大于完成时间')); } return callback(); }; 3. 互补一般两者都是互补使用 比如增加一个搜索按钮，需要在表格属性中增加： option: { height:'auto', calcHeight: 30, tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: false, viewBtn: true, selection: false, dialogClickModal: false, menu:false, addBtn:true, highlightCurrentRow: true,截图如下： 对应的列属性： column: [ { label: "工单编号", prop: "orderNo", rules: [{ required: true, message: "请输入工单编号", trigger: "blur" }], search:true, addDisplay:false, },截图如下：
|
【本文地址】
今日新闻 |
推荐新闻 |