<template>
 <div class="table_total">
   <div class="table_header">
     <p>单表</p>
     <el-divider></el-divider>
     <div class="table_headerBtun">
          <el-button type="primary" plain v-for="(item,index) in 7" :key="index">新增</el-button>
     </div>
   </div>
   <!-- 内容 -->
   <div class="table_nav">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item :title="title" :name="index" v-for="(item,index) in 4" :key="index">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  >
          <el-row :gutter="0">
            <el-col :span="6" v-for="(item,index) in 12" :key="index">
              <el-form-item :label="labletit" prop="dictName">
               <el-input
              v-model="queryParams.dictName"
              placeholder="请输入字典名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              />
             </el-form-item>
          </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>

    </el-collapse>
   </div>

 </div>

</template>

<script>
  export default {
    name: "index",
    data() {
      return {
         activeNames: ['1'],
         title:'单表1',
         // 查询参数
         queryParams: {
           pageNum: 1,
           pageSize: 10,
           dictName: undefined,
           dictType: undefined,
           status: undefined
         },
         labletit:'查询参数1233'
      };
    },
    methods: {
      handleChange(val) {
              console.log(val);
            }
    },
  };
</script>


<style  lang="scss">
  .table_header{
    .el-divider--horizontal{
      margin-top: 16px;
    }
  }
  .table_nav{
    .el-collapse-item__wrap{
      border-bottom: 0;
    }
    .el-collapse-item__header{
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }
    .el-form-item__content{
      width: 55%;
    }
    .el-collapse{
      border-top: 0;
    }
  }
</style>



<style scoped lang="scss">
  .app-main{
     // background-color: #eef0ff !important;
  }
  .table_total{
     background-color: #eef0ff;
     height: 100%;
     padding: 20px;
     // 头部
     .table_header{
        background-color: #fff;
        border-radius: 6px;
        padding: 23px;
        margin-bottom: 20px;
      p{
         font-size: 15px;
         font-weight: bold;
         color: #3C8DBC;
         line-height: 36px;
        }
      p::before{
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
     }
     // 内容
     .table_nav{
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
     }
  }
  p{
    margin: 0;

  }
</style>
