avue-crud属性说明

avue-crud属性说明
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说avue-crud属性说明,希望能够帮助大家进步!!!

上代码:html

<avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen">
<!-- 自定义列-->
<template slot="name" slot-scope="scope" >
<el-tag></el-tag>
</template>
<!-- 自定表单-->
<template slot-scope="scope" slot="nameForm">
<el-tag></el-tag>
</template>
<!-- 自定义菜单 配置slot卡槽为menuLeft为表单菜单左边位置,卡槽为menuRight为表格菜单右边的位置-->
<template slot="menuLeft">
<el-button type="primary" size="small">自定义按钮</el-button>
</template>
<template slot="menuRight">
<el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
</template>
<!-- 自定义表格里面的操作-->
<template slot-scope="scope" slot="menu">
<el-button icon="el-icon-check" size="small">自定义菜单按钮</el-button>
</template>
</avue-crud>
js

data() {

return {

obj:{},
data: [
{

name:'张三',
sex:'男',
date:'1994-02-23 00:00:00'
}, {

name:'李四',
sex:'女',
date:'1994-02-23 00:00:00'
}, {

name:'王五',
sex:'女',
date:'1994-02-23 00:00:00'
}, {

name:'赵六',
sex:'男',
date:'1994-02-23 00:00:00'
}
],
// 表格配置
option:{

title:'表格的标题',
align:'center', // 表格列齐方式
menuAlign:'center', // 菜单栏对齐方式
columnBtn:false, //列动态显隐按钮
refreshBtn:false, // 刷新按钮
saveBtn:false, // 保存按钮;
updateBtn:false, // 更新按钮
cancelBtn:false, // 行编辑取消按钮
addBtn:false, // 表格新增按钮
delBtn:false, // 行删除按钮
editBtn:false, // 行编辑按钮
column:[
{

label:'姓名',
prop:'name',
slot:true, // 自定义列
formslot:true // 自定义表单
},
{

label:'性别',
prop:'sex'
},{

label: "日期",
prop: "date",
type: "date",
format: "yyyy-MM-dd hh:mm:ss",
valueFormat: "yyyy-MM-dd hh:mm:ss",
}
]
}
}
}
 

// 表格属性
// width: “100%”,//表格宽度
// calcHeight: “auto”,//表格高度差(主要用于减去其他部分让表格高度自适应)
// height: “auto”,//表格高度
// maxHeight: “auto”,//表格最大高度
// border: true,//是否显示表格边框
// expand: false,//是否展开折叠行
// index: false,//是否显示表格序号(根据分页会自动计算,比如每页10行,到了第二页就会从11开始记数)
// indexLabel: “#”,//序号的标题
// stripe: true,//是否显示表格的斑马条纹
// showHeader: true,//是否显示表格的表头
// //defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段,order排序方式
// align: “center”,//表格列对其方式left/center/right
// menu: true,//是否显示操作菜单栏
// menuWidth: 240,//操作菜单栏的宽度
// menuAlign: “left”,//菜单栏对齐方式left/center/right
// searchSize: “small”,//搜索控件的大小small/mini
// columnBtn: true,//列显隐按钮
// refreshBtn: true,//刷新按钮
// addBtn: true,//添加按钮
// searchBtn: true,//搜索显隐按钮(当column中有搜索的属性,或则searchslot为true时自定义搜索启动起作用)
// editBtn: true,//行内编辑按钮
// delBtn: true,//行能删除按钮
//列属性
// label:“租户ID”,//列名称
// prop:“id”,//列字段
// placeholder:“请输入租户ID”,//控件提示输入语句
// align:“left”,//列的对其方式,覆盖table的align
// //width://列宽度
// minWidth:“auto”,//列最小宽度
// sortable:false,//排序
// hide:true,//隐藏列 表格起作用
// span:12,//表单栅列
// //precision:2,//数字框输入精度(当type为number时)
// search:false,//是否支持搜索
// type:“input”,//input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
// //maxRows:4,//最大行(当type为textarea)
// //minRows:2,//最小行(当type为textarea)
// //multiple:false,多选(当type为select/tree时)
// //format:"",//显示值时间格式(当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
// //valueFormat:"",//真实值的时间格式(当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
// clearable:true,//表单清空
// size:“medium”,//表单大小medium/small/mini
// editDisabled:false,//表单编辑时是否禁止
// editDisplay:false,//表单编辑是否可见
// addDisabled:false,//表单编辑时是否禁止
// addDisplay:false,//表单编辑是否可见
// slot:false,//列自定义 支持自定义列
// formslot:false,//表单自定义
// // fixed:true,//冻结列
// formWidth:“auto”,//表单宽度
// formHeight:“auto”,//表单行高度
// overHidden:false,//超出隐藏
// //rules://表单规则,参考ele表单规则配置Object
// //dicData://传入本次需要的静态字典(在column中dicData写对象key值即可加载)
// //dicMethod://传入字典的请求方式
// //dicQuery://传入字典的请求参数Object
// //dicUrl://字典的网络请求接口(例如配置/xxx/xx/{
{key}},这样的格式,在column中dicData自动匹配prop字段名)

本文来源huayang183,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/18139

发表评论