avue 的基本配置
avue 基本使用
·
<avue-crud
class="diy-table-d"
:option="option" //与option文件关联
:data="data" //表单需要渲染的数据
ref="crud" //ref链
v-model="form" //这个是可以form["名字"] = xx修改表单的值(没讲清楚)
:page="page" //大概是页数,没搞过
@on-load="onLoad" // 是封装好的方法,调用此方法更新页面
:table-loading="tableLoading" //大概加载动画
@selection-change="selectionChange" //当选择项发生变化时会触发该事件
@search-change="searchChange" //点击搜索后触发该事件(由于page分页信息和search搜索信息是sync修饰符,可以直接通过this.page和this.search拿到)
@search-reset="searchReset" //清空搜索回调方法
@current-change="currentChange" //分页页码改变时会触发
@size-change="sizeChange" //pageSize改变时会触发
@refresh-change="refresh" //点击刷新按钮触发该事件(由于page分页信息和search搜索信息是sync修饰符,可以直接通过this.page和this.search拿到)
:cell-style="cellStyle" //函数会有一个参数,那个参数页面加载的时候获取的每一项
@row-save="rowSave" //新增数据后点击确定触发该事件
@row-update="rowUpDate" //编辑数据后确定触发该事件
></avue-crud>
export const option = {
headerAlign: 'center',
align: 'center',
border: true,
index: true,
indexLabel: '序号',
tip: false, //提示
selection: true, //多选框
searchShow: true, //首次加载是否显示搜索
searchSize: "mini", //搜索框大小
indexFixed: false, //序号列是否冻结
size: 'mini', //控件大小
menu: true, //是否显示操作栏
menuWidth: 240, //操作菜单栏的宽度
columnBtn: false, //表格右侧操作列显隐的按钮
refreshBtn: false, //刷新按钮
searchBtn: false, //搜索显隐按钮
dialogWidth: '40%', //弹出表单的弹窗宽度
labelWidth: 150, //标题名称宽度
addBtnText: '保存', //新增按钮文案
cancelBtnTitle: '取消', //取消按钮文案
editBtn: false, // 行内编辑按钮
delBtn: false, //行内删除按钮
addBtn: true, //添加按钮
column: [
{
label: '押箱状态',
prop: 'yxztState',
// hide: true, //是否在表格里隐藏(会在增加里显示)
labelPosition: "right",
search: false, //搜索 默认false
searchslot: false,//搜索自定义
addDisplay: false, //表单新增时是否可见
editDisplay: false,//表单编辑时是否可见
viewDisplay: false,//表单查看时是否可见
span: 12, //栅列
slot: true, //列自定义
align: 'center',
width: 150, //列宽度
},
Avue核心是<avue-crud></avue-crue>
的标签,里面有:option="option"属性指向了api/option.js文件同级的是index.js文件,放api。
更多推荐
已为社区贡献1条内容
所有评论(0)