JeecgBoot之自定义弹出选择单多选框

如何自定义弹出选择单多选框

1.单选框和多选框

1.1首先需要做一个模板,用来进行调用

注意:此模块一般放在@/components/jeecgbiz下,因为此处导入了一个模板是同级目录的下一个目录的模板,./JSelectBizComponent。如果在别的目录,需要将./JSelectBizComponent改成合适的目录

<template>
  <j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/>
</template>
<!--检测项目表-->
<script>
  import JSelectBizComponent from './JSelectBizComponent'
  export default {
    name: 'JSelectMultiProject',
    components: { JSelectBizComponent },
    props: ['value'],
    data() {
      return {
        settings: {
          name: '弹出框的名字',
          displayKey: 'projectName',
          returnKeys: ['id', 'id'],//返回出去的数据,通常是id
          listUrl: '/xxx/xxxx/list',//查询数据的接口
          queryParamCode: 'name',//搜索定义,通过name实体类字段搜索记录
          queryParamText: '名称',//相当于label
          columns: [//返回的记录根据此处配置显示出来,此处显示俩个字段
            { title: '名称', dataIndex: '实体类字段名称,如下一个字段', align: 'center', width: 120 },
            { title: '描述', dataIndex: 'projectXXX', align: 'center', width: 120 }
          ]
        }

      }
    },
    computed: {
      configs() {
        return Object.assign({ value: this.value }, this.settings, this.$attrs)
      }
    }
  }
</script>
<style lang="less" scoped></style>

1.2调用模板

第一步:加载模板

import JSelectProject from "@/components/jeecgbiz/JSelectXXX";

第二步:注册模板

components: { 
      JSelectProject,
    },

第三步:使用
注意:j-select-project是根据模板的文件名生成的,pid是用来保存从模板返回来的id的。所以还需要设置在有this.form.setFieldsValue(…)的这个中加上这个字段属性,通常生成之后就会有。:multiple="false"表示这个模块是单选框,不设置这个就是多选框

<a-form-item label="工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
 <j-select-project v-decorator="['pid', {}]" @change="changeMe" :multiple="false" />
</a-form-item>

注意:单选和多选模板内容差别几乎没有,主要在:multiple="false"这个属性上,同时如果是多选框,存的值是以“,”分隔的字符串。如果涉及到关联表,那么需要自己手动查询出来,给v-decorator中属性设置值就会有默认的效果。如:

this.form.setFieldsValue({
  pid: that.testItemValue.join(","),//将查询到的id集合,以逗号分隔成字符串设置到pid中。
})
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页