自定义选择表单组件

我们在项目中会遇到很多的筛选字段组成筛选条件的表单，如果按照筛选字段全部渲染到页面，会造成页面布局臃肿的结果，如果能够自定义选择经常用的表单进行操作，是不是会人性化很多呢？

如下图，这是截取的一个片段，十七个查询条件，造成页面头重脚轻，因此需要进行自定义渲染

那么首先我们分析一下，这里的表单都是一个个单独的查询字段，有部分查询表单是公共组件的套用，如果用v-if进行筛选，实际上v-if的判断条件，与筛选后的字段是不容易匹配的，这里我用的是增加标识的方法，通过我增加的标识，判断表单是否需要渲染

首先我们需要把你所需要的数据源写好，并且增添一个标识，这里我用的id：1的标识，我可以通过id值的不同分别渲染，

这是做好后的效果，通过显示更多按钮来进行弹窗

这是公共组件的代码，就是弹窗的代码

<template>
<el-dialog
  title="添加"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <span class="spanclass">显示查询条件</span>
  <div class="sitsCheckbox">
  <div class="syyyyytsh"  v-for="(checkOne,index) in workVideosOptionss" @click='checkedOne(checkOne.id)' :key="checkOne.id">
	<input type="checkbox" :checked="checkStatusList.indexOf(checkOne.id)>=0">
	<span>{{checkOne.dictLabel}}</span>
    </div>
    </div>
    <span class="spanclass">显示列表字段</span>
     <div class="sitsCheckbox">
  <div class="syyyyytsh"  v-for="(checkOne,index) in tableListCrows" @click='checkedOne(checkOne.id)' :key="checkOne.id">
	<input type="checkbox" :checked="checkStatusList.indexOf(checkOne.id)>=0">
	<span>{{checkOne.dictLabel}}</span>
    </div>
    </div>
    <el-button class="btnstyle" type="primary" @click="senInputStatus">确 定</el-button>
    <el-button class="btnstyle" @click="clearInputStatus">取 消</el-button>
</el-dialog>

</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        checkStatusList:[7,8,5,9],
        
           workVideosOptionss: [
        {
          dictLabel: "工作主体",
          id:1
        },
        {
          dictLabel: "所属单位",
          id:2
        },
        {
          dictLabel: "计划类型",
          id:3
        },
        {
          dictLabel: "工作专业",
          id:4
        },
        {
          dictLabel: "流程状态",
          id:5
        },
        {
          dictLabel: "风险等级",
          id:6
        },
        {
          dictLabel: "工作任务",
          id:7
        },
        {
          dictLabel: "计划时间",
          id:8
        },
        {
          dictLabel: "作业状态",
          id:9
        },
        {
          dictLabel: "厂站/线路",
          id:10
        },
        {
          dictLabel: "作业视频",
          id:11
        },
        {
          dictLabel: "班组",
          id:12
        },
        {
          dictLabel: "负责人",
          id:13
        },
        {
          dictLabel: "承接计划",
          id:14
        },
        {
          dictLabel: "关联票",
          id:15
        },
        {
          dictLabel: "填报人",
          id:16
        },
        {
          dictLabel: "作业部门",
          id:17
        },
      ],
      tableListCrows:[
        {
          dictLabel: "工作任务",
          id:501
        },
        {
          dictLabel: "单位",
          id:502
        },
        {
          dictLabel: "工作主体",
          id:503
        },
        {
          dictLabel: "工作专业",
          id:504
        },
        {
          dictLabel: "计划类型",
          id:505
        },
        {
          dictLabel: "工作负责人",
          id:506
        },
        {
          dictLabel: "开始日期",
          id:507
        },
        {
          dictLabel: "结束日期",
          id:508
        },
        {
          dictLabel: "流程状态",
          id:509
        },
        {
          dictLabel: "作业状态",
          id:510
        },
        {
          dictLabel: "综合评估等级",
          id:511
        },
        {
          dictLabel: "录入时间",
          id:512
        },
        {
          dictLabel: "作业视频",
          id:513
        },
       
      ],
      };
    },
    methods: {
    checkedOne(value){
        let idIndex=this.checkStatusList.indexOf(value);
        if(idIndex>=0){
            this.checkStatusList.splice(idIndex,1)
        }else{
            this.checkStatusList.push(value)
        }

    },
        senInputStatus(){
            if(this.checkStatusList==''){
         this.$message({
          message: '内容不能为空',
          type: 'warning'
                });
         return
            }
            this.$emit("sendUser",this.checkStatusList)
            this.dialogVisible=false
            console.log(this.checkStatusList)

        },

        handleClose(){
            this.dialogVisible=false
        },
        clearInputStatus(){
            this.dialogVisible=false;
            
        },
    },
    mounted(){

    },
  };
</script>
<style scoped>
.el-dialog{
    width: 1000px;
    height: 440px;
}
.sitsCheckbox{
    width: 900px;
    height: 120px;
    display: flex;
    flex-wrap: wrap;
}
.sitsCheckbox .syyyyytsh{
    width: 120px;
    margin-left: 20px;
}
.spanclass{
    margin: 0px 10px 10px 10px;
    font-weight: bold;
    display: inline-block;
}
.btnstyle{
    float: right;
    margin: 20px;
}
</style>

 这里的代码是把选择后的id值传给父组件，父组件接收后，根据接收的id值进行条件判断，如果存在1，第一个表单为true，并且通过localstorage存入浏览器，方便下次使用