Net6低代码快速开发框架-vol框架-select下拉框table搜索

自定义下拉框搜索

下拉框快速检索。支持单选、多选、模糊搜索、联动等操作

代码实现

  onInited() {
      //配置编辑表单下拉框table搜索选项
      this.initFormSelectTable();
    },
    initFormSelectTable(item) {
      //配置编辑表单下拉框table搜索选项
      this.editFormOptions.forEach((option) => {
        option.forEach((item) => {
          if (item.field == 'Customer') {
            //设置只读是否
            //item.readonly = false;
            //配置请求的接口地址
            //可以使用生成的页面接口，注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
            //item.url = 'api/Demo_Customer/getPageData';

            //尽量自定义接口，见下面的文档描述，或者Demo_CustomerController类的方法Search
            item.url = 'api/Demo_Customer/search';

            //设置显示的字段
            item.columns = [
              { field: 'Customer_Id', title: 'Customer_Id', type: 'int', width: 110, hidden: true },
              //设置search:true,则字段可以搜索
              { field: 'Customer', title: '客户', type: 'string', width: 80, search: false }, 
              { field: 'PhoneNo', title: '手机', type: 'string', width: 110, search: false },
              { field: 'Province', title: '省', type: 'string', bind: { key: '省', data: [] }, width: 80, search: false },
              { field: 'DetailAddress', title: '详细地址', type: 'string', width: 120 }
            ];

            //选中table数据后，回写到表单
            item.onSelect = (rows) => {
              //给表单字段设置值
              this.editFormFields.Customer = rows[0].Customer;
              this.editFormFields.PhoneNo = rows[0].PhoneNo;
            };
             
            //设置过滤条件
            //(输入框搜索)表格数据加载前处理
            item.loadBefore = (param, callback) => {
              //方式1、手动设置查询条件
              // param.wheres.push({
              //       name:"Customer",
              //       value:this.editFormFields.Customer,
              //       displayType:"like"
              // })
              //方式2、给param.value设置值，后台手动处理查询条件
              param.value = this.editFormFields.Customer;
              callback(true);
            };


            /****************下面这些配置不是必须的**************/
            //表格数据加载后处理
            item.loadAfter = (rows, callback, result) => {
              callback(true);
            };

            //设置弹出框高度(默认200)
            item.height = 200;
            //设置弹出框宽度(默认500)
            //item.width = 400;
           // item.textInline = false; //设置表格超出自动换行显示
            //设置表格是否单选
            item.single = true;
            //设置是否显示分页
            item.paginationHide = false;
          }
        });
      });
    }

具体演示操作：http://pro.volcore.xyz/#/