上代碼: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字段名）