vxe-grid 实现配置式form搜索条件 & form搜索条件框可折叠 & 配置式table

文章目录

• 效果图
• 代码

  效果图

  

  代码

    
  
      
        
          
        
        
          
        
        
          搜索
          
          重置
        
        
          修改
          
          删除
          
        
        
          
            
              
                
                  
                    {{ item.name }} {{ item.count ? `(${item.count})` : '' }}
                  
                
                表头
                表头+表体
              
            
            
              新增
              
              删除
              
            
          
        
      
      
    
  
  

  data定义

  gridOptions: {
    id: 'full_edit_1', //storage需要
    keepSource: true,//编辑状态下的还原需要
    border: true,
    loading: false,
    align: "center",
    stripe: true,
    printConfig: {},
    exportConfig: {},
    rowConfig: {
      isHover: true//高亮显示
    },
    formConfig: {
      titleWidth: 80,
      titleAlign: 'right',
      items: [],
      data: {}
    },
    columnConfig: {
      resizable: true //是否启用列宽调整
    },
    customConfig: {
      storage: true, //是否启用 localStorage 本地保存
      immediate: true,
      showFooter: false
    },
    toolbarConfig: {
      refresh: {queryMethod: this.handleQuery},
      slots: {
        buttons: 'toolbar_buttons'//自定义工具栏按钮
      }
    },
    editConfig: {
      trigger: 'dblclick',
      enabled: true,
      mode: 'row',
      showStatus: true //只对 keep-source 开启有效，是否显示单元格新增与修改状态
    },
    sortConfig: {
      trigger: 'cell',//触发方式
      remote: true //所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理
    },
    filterConfig: {
      remote: true
    },
    //右击菜单
    menuConfig: {
      body: {}
    },
    importConfig: {
      remote: true,
      importMethod: this.importMethod,
      types: ['xlsx'],
      modes: ['insert']
    },
    checkboxConfig: {
      labelField: '',
      reserve: true,
      highlight: true,
      range: true
    },
    //列
    columns: [],
    //较验规则
    editRules: {},
    data: []
  }
  

  created() {
     this.gridOptions.menuConfig.body = constant.menuConfig;
     this.getColumns();//请求tableConfig配置项数据
     this.priceJustStatic()
   },
  methods: {
      getColumns() {
        this.gridOptions.loading = true
        getInfoByBusiCode("请求配置项数据").then(res => {
          if (res.code === 200) {
            this.gridOptions.columns = JSON.parse(res.data.columns);
            this.gridOptions.formConfig.items = JSON.parse(res.data.formConfig);
            this.gridOptions.editRules = JSON.parse(res.data.rules);
            this.handleQuery();
          } else {
            this.gridOptions.loading = false;
            this.$modal.msgError("获取表数据失败，请重试");
          }
        });
      },
      getList() { //获取table列表数据
        this.gridOptions.loading = true
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          form: this.gridOptions.formConfig.data //获取from搜索条件数据
        }
        getInfoList(params).then(res => {
          this.gridOptions.loading = false;
          if (res.code === 200) {
            this.gridOptions.data = res.rows;
            this.total = res.total;
          }
        })
      },
  	 handleQuery() {
        this.pageNum = 1;
        this.getList();
      },
  }
  

  //from 配置
  [{
  	"field": "pId",
  	"title": "标题",
  	"span": 8,
  	"itemRender": {},
  	"slots": {
  		"default": "pId"
  	}
  }, {
  	"field": "billCode",
  	"title": "单据号",
  	"span": 8,
  	"itemRender": {
  		"name": "VxeInput",
  		"props": {
  			"placeholder": "请输入单据号"
  		}
  	}
  }, {
  	"field": "sType",
  	"title": "标题",
  	"span": 8,
  	"folding": true, //开启折叠
  	"itemRender": {},
  	"slots": {
  		"default": "sType"
  	}
  }, {
  	"field": "Time",
  	"title": "日期",
  	"span": 12,
  	"folding": true,//开启折叠
  	"itemRender": {},
  	"slots": {
  		"default": "Time"
  	}
  }, {
  	"span": 24,
  	"align": "center",
  	"collapseNode": true,//折叠终止
  	"itemRender": {},
  	"slots": {
  		"default": "fromButton"
  	}
  }]
  

  

  //table 配置
  [{
  	"type": "checkbox",
  	"width": "50",
  	"fixed": "left"
  }, {
  	"type": "seq",
  	"title": "序号",
  	"visible": true,
  	"width": "80"
  }, {
  	"field": "id",
  	"title": "ID",
  	"visible": false,
  	"width": "60",
  	"fixed": "left"
  }, {
  	"field": "remark",
  	"title": "备注",
  	"visible": true,
  	"width": "80",
  	"slots": {
  		"default": "remark"
  	}
  }, {
  	"title": "操作",
  	"width": "150",
  	"fixed": "right",
  	"slots": {
  		"default": "operate"
  	}
  }]