增加页面滚动条

Posted 2021-04-04 zhizhi0810

增加页面滚动条

1、给el-drawer增加滚动条

直接添加这个属性名

custom-class="overflow-auto"

<el-drawer
      title="应用详情"
      :visible.sync="showServiceDialog"
      custom-class="overflow-auto"
      direction="rtl"
      size="70%">
      <el-form ref="serviceForm" label-width="110px" label-position="right"
               :model="registryInfo"
               :disabled="operationType === 'view'">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="应用名" prop="applicationName">
              <el-input v-model="registryInfo.appInfo.applicationName" :disabled="operationType === 'modify'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="集群" prop="groupName">
              <el-input v-model="registryInfo.appInfo.groupName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="元数据" prop="metadata">
              <el-input v-model="registryInfo.metadata" type="textarea" rows="8" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-lable style="padding: 20px">
        集群：{{ registryInfo.appInfo.groupName }}
      </el-lable>
      <el-table
        :data="registryInfo.instanceInfos"
        stripe
        style="width: 100%">
        <el-table-column
          prop="ip"
          label="IP"
          align="center" />
        <el-table-column
          prop="port"
          label="端口"
          align="center" />
        <el-table-column
          prop="weight"
          label="权重"
          align="center" />
        <el-table-column
          prop="healthy"
          label="健康状态"
          align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.enable ? 'success' : 'danger'">
              {{ scope.row.enable ? 'true' : 'false' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="metadata"
          label="元数据"
          align="center">
          <template slot-scope="scope">
            <p v-for="item in scope.row.metadata" :key="item">
              {{ item }}
            </p>

          </template>
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          align="center" />
      </el-table>
    </el-drawer>

index.less

.overflow-auto {
  overflow: auto !important;
}