avue-crud属性说明

html代码：
<avue-crud :data="data" :option="option">
    <!-- 自定义列-->
    <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{
        data:[],
        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 // 自定义表单
                },
            ]
        }
    }
}


表格属性
width: “100%”,//表格宽度
calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）
height: “auto”,//表格高度
maxHeight: “auto”,//表格最大高度
border: true,//是否显示表格边框
expand: false,//是否展开折叠行
expandWidth: 50,//展开折叠行宽度
dialogModal: true,//是否需要遮罩层
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时自定义搜索启动起作用）
searchIcon:false//表格搜索半收缩按钮
searchShow:true//表格搜索首次是否展示
editBtn: true,//行内编辑按钮
delBtn: true,//行能删除按钮
filterBtn：true,//自定义过滤表格列按钮
viewBtn: true,//查看按钮
viewTitle://查看窗口文案

列属性
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,//是否支持搜索
searchLabelWidth://搜索项标题宽度  number 默认80
searchPlaceholder://搜索项辅助文字  string
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字段名）
avue-crud属性说明

悦读
