VUE里如何修改element-ui的显示层次与上下间隔

<!--审批正常流程-->
    <el-dialog :z-index="1000" :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
      <el-form ref="taskForm" :model="taskForm" label-width="160px">
        <el-form-item v-if="checkSendUser" prop="targetKey">
          <el-row :gutter="20">
            <el-col :span="12" :xs="24">
              <h6>待选人员</h6>
              <el-table ref="singleTable" :data="userDataList" border style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center"  />
                <el-table-column label="用户名" align="center" prop="realname" />
                <el-table-column label="部门" align="center" prop="orgCodeTxt" />
              </el-table>
            </el-col>
            <el-col :span="8" :xs="24">
              <h6>已选人员</h6>
              <el-tag v-for="tag in userData" :key="tag" closable @close="handleClose(tag)">
                {{tag.realname}} {{tag.orgCodeTxt}}
              </el-tag>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见" />
        </el-form-item>
        <el-form-item label="附件"  prop="commentFileDto.fileurl">
          <j-upload v-model="taskForm.commentFileDto.fileurl"   ></j-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="completeOpen = false">取 消</el-button>
        <el-button type="primary" @click="taskComplete">确 定</el-button>
      </span>
    </el-dialog>

 .el-form-item {
      margin-bottom: 20px;
  }

<el-col :span="8">
  <el-form-item label="合同编码" prop="agreementCode" >
    <el-input v-model="form.agreementCode" :disabled="addEditDisabled.editDisable" :maxlength="3" />
  </el-form-item>
</el-col>

<el-col :span="8">
  <el-form-item label="合同编码" prop="agreementCode" >
    <el-input v-model="form.agreementCode" 
    :disabled="addEditDisabled.editDisable" 
    :maxlength="10"
    onkeyup="this.value=this.value.replace(/[, ]/g,'')"
    />
  </el-form-item>
</el-col>

        <el-row>
          <el-col :span="8" v-if="addEditDisabled.hide">
            <el-form-item label="密码" prop="password"  label-width="110px">
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.password"
                auto-complete="new-password"
                placeholder="请输入密码"
                :type="pwdType"
                @keyup.native="trimLR('form', 'password')"
              >
                <svg-icon
                  :icon-class="eyeType"
                  slot="suffix"
                  class="el-input__icon input-icon"
                  @mousedown="changeType()"
                  @mouseup="changeType()"
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认密码" prop="confirmPassword"  v-if="addEditDisabled.hide" label-width="110px" >
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.confirmPassword"
                placeholder="请确认密码"
                :type="pwdType2"
                @keyup.native="trimLR('form', 'confirmPassword')"
              >
                <svg-icon
                  :icon-class="eyeType2"
                  slot="suffix"
                  class="el-input__icon input-icon"
                  @mousedown="changeType2()"
                  @mouseup="changeType2()"
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="集团员工编号" prop="userGroupCode" label-width="110px">
              <el-input
                :disabled="addEditDisabled.disable2"
                v-model.trim="form.userGroupCode"
                placeholder="请输入员工编号"
                maxlength="11"
                @keyup.native="trimLR('form', 'userGroupCode')"
              />
            </el-form-item>
          </el-col>
        </el-row>

v-model.trim="form.password"
@keyup.native="trimLR('form', 'password')"

    trimLR(val, val1) {
      if (this[val][val1]) {
        this[val][val1] = this[val][val1].replace(/\s+/g, "");
      }
    },