<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>
<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>
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",
}
]
}
}
}
一些常见的属性说明:
表格属性:
dialogWidth: '60%',
width: “100%”,
calcHeight: “auto”,
height: “auto”,
maxHeight: “auto”,
border: true,
expand: false,
index: false,
indexLabel: “#”,
stripe: true,
showHeader: true,
defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段,order排序方式
align: “center”,
menu: true,
menuWidth: 240,
menuAlign: “left”,
searchSize: “small”,
columnBtn: true,
refreshBtn: true,
addBtn: true,
searchBtn: true,
editBtn: true,
delBtn: true,
tree: false,
lazy: false,
列属性:
label:“租户ID”,
prop:“id”,
placeholder:“请输入租户ID”,
align:“left”,
width://列宽度
minWidth:“auto”,
sortable:false,
hide:true,
span:12,
precision:2,
search:false,
type:“input”,
maxRows:4,
minRows:2,
multiple:false,多选(当type为select/tree时)
format:"",
valueFormat:"",
clearable:true,
size:“medium”,
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://字典的后端api请求接口(例如配置/xxx/xx/{{key}},这样的格式,在column中dicData自动匹配prop字段名)