【vue】avue-crud配置大全-持续更新

1.表格属性

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,//行能删除按钮
menuTitle: '禁用', //改变操作栏标题
labelWidth: 100, // 新增表单的labelWidth
selection: true, // 显示勾选列
selectable:(row,index)=>{
  return row.id == 1;
},// 根据条件判断该行是否能被勾选

2.列属性

label: '姓名',//列名称
prop: 'name',//列字段
placeholder: '请输入姓名',//控件提示输入语句
align: 'left',//列的对其方式，覆盖table的align
width: 100,//列宽度
minWidth: 'auto',//列最小宽度
sortable: false,//排序
hide: true,//隐藏列 表格起作用
span: 12,//表单栅列
precision: 2,//数字框输入精度（当type为number时）
search: false,//是否支持搜索
maxRows: 4,//最大行（当type为textarea）
minRows: 2,//最小行（当type为textarea）
multiple: false,//多选（当type为select/tree时）
format: "",//显示值时间格式
valueFormat: "",//真实值的时间格式
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字段名）

3.表格事件

:before-open=“beforeOpen”

//1.说明：
/*
1.新增、编辑和查看操作，弹框打开前调用的方法
2.done() 调用后继续往后
3.type有add,edit,view三种
*/
//2.用法示例：
beforeOpen(done, type) {
  if (["add", "edit"].includes(type)) {
//    this.initData();  做一些初始化的操作，例如给某个字段加上自定义配置
  }
  if (["edit", "view"].includes(type)) {
  /*这里查询操作，可以初始化表单
    one(this.form.id).then(res => {
      this.form = res.data.data;
    });*/
  }
  done();
}
/*
initData(){
	const column = this.findObject(this.option.column,"name");
    column.dicData = [{'key':'1','value':'张三'];
}*/

:before-close=“beforeClose”

//1.说明：
/*
1.弹框关闭前调用的方法
2.done() 继续往下，正常关闭
*/
//2.用法示例：
beforeClose(done) {
  this.$refs.crud.tableForm = {};//清空表单
  this.$refs.crud.value.name = "";//清空某个值
  this.$refs.crud.value.addDisabled = false;
  /*修改option.column中的值
  this.$refs.crud.option.column.filter(item => {
    if (item.prop === "parentId") {
      item.value = "";
      item.addDisabled = false;
    }
  });*/
  done();
}

:cell-class-name=“addClass”

//1.说明：
/*
1.可以给cell添加自定义样式
2.addClass自定义方法，取名任意
3.row:行对象，column列对象，rowIndex行索引，columnIndex列索引
4.给具体某一行或某一列添加一个样式，然后定义样式class
*/
//2.用法示例：
addClass({row,column,rowIndex,columnIndex}){
  if(column.property == 'name'){
      return "nameStyle";
  }
}
//scss样式
/deep/ .nameStyle span>span{
	background-color: #ecf5ff;
	border-color: #d9ecff;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	color: #409EFF;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	white-space: nowrap;
	display: inline-block;
}

:page与:on-load

//page分页需要加on-load事件，否则翻页、跳转点击无反应
<template>
  <avue-crud
  :data="data"
  :option="option"
  :page="page"
  :table-loading="tableLoading"
  @on-load="onLoad"
></avue-crud>
</template>
<script>
  export default {
    data() {
      return {
        tableLoading: false,
        searchForm:{

        },
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        data: [],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },
    methods:{
      onLoad(page) {
      	//查询参数，这里需指定自己的请求参数
        var params = this.searchForm;
        //请求后端方法，这里需指定自己的请求方式
        getRequest(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize,
            },
            params
          )
        ).then((response) => {
          this.data = response.data.records;
          this.page.currentPage = response.data.current;
          this.page.pageSize = response.data.size;
          this.page.total = response.data.total;
          this.tableLoading = false;
        });
      }
    }
  }
</script>