el-card显示不全怎么解决

img


<template>
  <el-card style="min-height: 100%">
    <div slot="header" class="clearfix">
      <span>添加栏目span>
    div>
    <el-scrollbar>
      <div>
        <el-form label-width="200px">
          <el-col :span="16"
            ><el-form-item label="栏目名称">
              <el-input>el-input> el-col>
          <el-col :span="16"
            ><el-form-item label="索引名称">
              <el-input>el-input>
            el-form-item>
          el-col>
          <el-col :span="16"
            ><el-form-item label="栏目描述">
              <el-input>el-input> el-col>
          <el-col :span="16"
            ><el-form-item label="栏目关键字">
              <el-input>el-input> el-col>
          <el-col :span="16">
            <el-form-item label="栏目图片">
              <el-upload action="">
                <el-button plain>选取图片el-button>
              el-upload>
            el-form-item>
          el-col>
          <el-col :span="16">
            <el-form-item label="栏目组">
              <el-select>
                <el-option>el-option>
              el-select> el-col>
          <el-col :span="16">
            <el-col :span="6">
              <el-form-item label="添加栏目">
                <el-switch>el-switch>
              el-form-item>
            el-col>
            <el-col :span="6">
              <el-form-item label="添加内容">
                <el-switch>el-switch>
              el-form-item>
            el-col>
          el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> el-form-item>
          el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> el-form-item>
          el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> el-form-item>
          el-col>
          <el-col :span="16">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button type="primary">立即添加el-button>
              <el-button>取消el-button>
            el-form-item>
          el-col>
        el-form>
      div>
  el-card>
template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseView from "@/views/baseView";
import canAccessView from "@/utils/accessCheck";
import { ApiDescription, HttpMethod } from "@/utils/apiDescription";

@Component({
  components: {},
})
export default class add extends BaseView {}
script>

<style lang="scss" scoped>
.el-col {
  height: 100%;
}

// el-card高度溢出怎么解决
.el-card {
  height: 100%;
}
style>

el-card显示不全怎么解决?

高度不够 。 就算设置100% 也不行 。你只能 加个滚动 或者 其它方案 比如:加大 父元素高度