vue页面边框调整

layout布局

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称" prop="blName" label-width="125px">
            <el-input
              v-model="queryParams.blName"
              placeholder="名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一社会信用代码" prop="utscc" label-width="125px">
            <el-input
              v-model="queryParams.utscc"
              placeholder="请输入统一社会信用代码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营者" prop="operator" label-width="125px">
            <el-input
              v-model="queryParams.operator"
              placeholder="经营者"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="注册日期" label-width="125px">
            <el-date-picker clearable
              width="215px"
              style="width: 215px;"
              v-model="registerTime"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
<el-col :span="8">  span相加为24表示一行沾满为100%
label-width="125px" 可以调整搜索框宽度

调整form表单页面上下左右边距
<style lang="scss">
.el-main{
  padding: 0 20px 20px !important;
  .app-container{
    padding: 0 20px 20px !important;
  }
}
</style>

你可能感兴趣的:(浅谈前端,vue.js,javascript,前端)