iview设置height出现的问题

iview设置table的height,第一次查看没有问题，在esc后再次打开，由于事件触发刷新，会导致格式乱。
是由于空数据时，丢失若干列，标题肥大。解决方式先将height设置为0;在触发时在设置具体高度，退出再设置为0.

<template>
  <div v-draggable="options">
    <Card style="margin-bottom: 10px">
      <p slot="title">下拉列表查询</p>
      <Row style="margin-bottom: 10px" type="flex" justify="space-around">
        <Col span="4">
          字段名称
          <Input type="text" v-model="fldNm" placeholder="请输入字段名称" />
        </Col>
        <Col span="4">
          字段描述
          <Input type="text" v-model="varDescr" placeholder="请输入字段描述" />
        </Col>
      </Row>
      <Row :gutter="10" type="flex" justify="center">
        <Col :lg="2" :md="2">
          <Button type="primary" @click="handleQuery">查询</Button>
        </Col>
        <Col :lg="2" :md="2">
          <Button type="warning" @click="handleReset">重置</Button>
        </Col>
      </Row>
    </Card>
    <Card>
      <div slot="title">
        <p style="display: inline">下拉扩展列表</p>
        <Button type="primary" style="margin-left: 20px" @click="handleBtnIncrease" :disabled="this.$store.state.user.access === '3'">新增</Button>
      </div>
      <Table
        size="small"
        :loading="tableLoading"
        :columns="columns2"
        :data="tableData"
        style="margin-bottom: 10px"
      ></Table>
      <div class="pageContainer">
        <Page
          :current="parseInt(pageConfig.currentPage)"
          :total="parseInt(pageConfig.total)"
          :page-size-opts="pageConfig.pageSizeOpt"
          :page-size="parseInt(pageConfig.pageSize)"
          show-sizer
          show-elevator
          show-total
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></Page>
      </div>
    </Card>
    <Modal
      id="drg52"
      v-model="modal2"
      :mask-closable="false"
      @on-cancel="handleModalCancel"
      :styles="{'top': '100px','width':'70%'}"
    >
      <p
        slot="header"
      >{{(modalOperation === '0') ? '新增下拉列表扩展' : (modalOperation === '1') ? '修改下拉扩展列表' : '复制数据字典'}}</p>
      <Form ref="systemForm" :model="systemFormData" :rules="systemFormRules" inline>
        <Row :gutter="32" type="flex" justify="center">
            <Col push="1" span="12">
                <FormItem label="下拉列表扩展编号" prop="listNum">
                <Input
                    type="text"
                    v-model="systemFormData.listNum"
                    placeholder="请输入下拉列表扩展编号"
                    style="width: 190px"
                />
                </FormItem>
            </Col>
            <Col push="1" span="12">
                <FormItem label="字段名" prop="listCd">
                <Input
                    :disabled="modalOperation === '1'"
                    type="text"
                    v-model="systemFormData.listCd"
                    placeholder="请输入字段名"
                    style="width: 190px"
                />
                </FormItem>
            </Col>
        </Row>
      </Form>
     <Table @on-selection-change="selectChange" ref="selection" :columns="columns4" :data="data1"  :height="heightNum"></Table>
      <div slot="footer" style="display:flex;justify-content: center">
        <Button
          v-if="modalOperation === '0' || modalOperation === '2'"
          type="primary"
          :loading="loading"
          icon="checkmark-round"
          @click="handleIncreaseSubmit('systemForm')"
        >
          <span v-if="!loading">新增</span>
          <span v-else>提交中...</span>
        </Button>
        <Button
          v-else
          type="primary"
          :loading="loading"
          icon="checkmark-round"
          @click="handleModifySubmit('systemForm')"
        >
          <span v-if="!loading">修改</span>
          <span v-else>提交中...</span>
        </Button>
        <Button
          v-if="modalOperation === '0'"
          type="warning"
          icon="refresh"
          @click="handleResetForm('systemForm')"
        >重置</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { datetimeFormat } from "../Util/DateUtil";
import {download} from '../Util/Download';
export default {
  name: "dictLisPower",
  data() {
    // 系统号校验器
    const validateSysNo = (rule, value, callback) => {
        this.heightNum = 400
        this.data1 = [
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },

              {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
              {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
            {
                listCd: 'John Brown',
                wordListCaptn: 18,
                listVal: 'New York No. 1 Lake Park',
            },
        ],
        callback()
      // 后台请求
        // this.$ajax
        //   .post("", {
        //     listCd: this.systemFormData.listCd
        //   })
        //   .then(
        //     res => {
        //         console.log(res)
        //         callback();
        //     },
        //   );
    };
    return {
        selection:"",
        // iview的bug
        heightNum:0,
        columns4: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                type: 'index',
                title: '序号',
                width: 60,
                align: 'center'
            },
            {
                title: '枚举代码',
                key: 'listCd',
                align: 'center'
                
            },
            {
                title: '枚举说明',
                key: 'wordListCaptn',
                align: 'center'
                
            },
            {
                title: '枚举值',
                key: 'listVal',
                align: 'center'
                
            },
        ],
      data1:[],
      enumFlag: [
        {
          // 处理方式下拉Option数据
          value: "true",
          label: "是"
        },
        {
          value: "false",
          label: "否"
        }
      ],
      dataTpFlg: [
        {
          // 处理方式下拉Option数据
          value: "String",
          label: "String"
        },
        {
          value: "BigDecimal",
          label: "BigDecimal"
        },
        {
          value: "Time",
          label: "Time"
        },
        {
          value: "Date",
          label: "Date"
        },
        {
          value: "Long",
          label: "Long"
        },
        {
          value: "byte[]",
          label: "byte[]"
        },
        {
          value: "Clob",
          label: "Clob"
        },
        {
          value: "char",
          label: "char"
        }
      ],
      options: {
        // 拖拽参数
        id: "drg52",
        recover: true,
        isClose: false
      },
      contactFormData: {
        // 新增联系人表单数据对象
      },
      contactFormRules: {
        // 新增联系人表单校验规则
      },
      tableLoading: false, // Table Loading 遮罩
      loading: false, // 按钮Loading
      sysNo: "", // 搜索框
      fldNm: "",
      varDescr: "",
      columns2: [
        // Table Columns 数据
        {
          title: "序号",
          key: "indexNum",
          width: 100,
          align: "center"
        },
        {
          title: "字段名称",
          key: "fldNm",
          width: 233,
          align: "center"
        },
        {
          title: "字段描述",
          key: "varDescr",
          width: 233,
          align: "center"
        },
        {
          title: "数据类型",
          key: "dataTp",
          width: 200,
          align: "center"
        },
        {
          title: "长度",
          key: "len",
          width: 100,
          align: "center"
        },
        {
          title: "精确度",
          key: "decmPointBit",
          width: 100,
          align: "center"
        },
        {
          title: "是否枚举",
          key: "globalEnumFlg",
          width: 133,
          align: "center"
        },
        {
          title: "序列号",
          key: "recdNo",
          width: 300,
          align: "center"
        },
        {
          title: "操作",
          key: "operation",
          width: 263,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    disabled: this.$store.state.user.access === '3'
                  },
                  on: {
                    click: () => {
                      this.handleModifyModal(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  style: {
                    marginLeft: "5px"
                  },
                  props: {
                    type: "success",
                    size: "small",
                    disabled: this.$store.state.user.access === '3'
                  },
                  on: {
                    click: () => {
                      this.handleCopyJob(params.row);
                    }
                  }
                },
                "复制"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "确定删除字段名为[" + params.row.fldNm + "]的吗?",
                    transfer: true,
                    placement: "left"
                  },
                  on: {
                    "on-ok": () => {
                      this.deleteSystem(params.row.fldNm);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small",
                        disabled: this.$store.state.user.access === '3'
                      },
                      style: {
                        marginLeft: "10px"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }
      ],
      dictIdTemp: "", // 临时系统ID
      searchById: "", // 添加系统维护人员按ID查找搜索框绑定值
      searchByName: "", // 添加系统维护人员按姓名查找搜索框绑定值
      tableData: [], // Table 数据
      option2: [], // ID搜索下拉Option数据
      option3: [], // 姓名搜索下拉Option数据
      pageConfig: {
        // 分页组件数据
        pageSizeOpt: [10, 20],
        total: "0",
        pageSize: "10",
        currentPage: "1"
      },
      contactList: [], // 维护联系人Table数据
      loading1: false, // 工号搜索Loading
      loading2: false, // 姓名搜索Loading
      modal2: false, // 是否显示新增/修改系统信息弹出框
      modal3: false, // 是否显示添加/修改系统维护联系人弹出框
      modal4: false, // 是否显示添加联系人弹出框
      modalOperation: "0", // 新增/编辑系统操作类型
      contactModalType: "0", // 添加/修改维护人员操作类型
      systemFormData: {
        // 新增/修改系统表单
        listCd: "",
        listNum: "",
      },
      systemFormRules: {
        // 新增/修改系统表单校验规则
        listCd: [
          {
            required: true,
            validator: validateSysNo,
            trigger: "blur"
          }
        ],
        listNum: [
          {
            required: true,
            type: "string",
            message: "扩展下拉编号不可以为空",
            trigger: "blur"
          }
        ],
      }
    };
  },
  methods: {
    //   选择触发参数
    selectChange(selection){
        this.selection = selection
    },
    // 为数据添加序号字段
    addIndexNumForData(arr, pageNum) {
      arr.forEach((item, index) => {
        item.indexNum = (pageNum - 1) * this.pageConfig.pageSize + index + 1;
      });
      return arr;
    },
    // 点击查询按钮
    handleQuery() {
      this.pageConfig.currentPage = "1";
      this.getSystemInfo();
    },
    // 点击重置按钮
    handleReset() {
      this.fldNm = "";
      this.varDescr = "";
      this.pageConfig.currentPage = "1";
      this.getSystemInfo();
    },
    // 系统列表页码变化时
    handlePageChange(clickPageNum) {
      this.pageConfig.currentPage = "" + clickPageNum;
      this.getSystemInfo();
    },
    // 系统列表分页数据量变换时
    handlePageSizeChange(pageSize) {
      this.pageConfig.pageSize = pageSize;
      if (this.pageConfig.currentPage === "1") {
        this.getSystemInfo();
      }
    },
    // 点击新增按钮
    handleBtnIncrease() {
      this.handleResetForm("systemForm");
      this.options.isClose = false;
      this.modalOperation = "0";
      this.modal2 = true;
    },
    // 新增/修改系统表单对话框被关闭时
    handleModalCancel() {
      this.handleResetForm("systemForm");
      this.data1 = [],
      this.heightNum = 0;
      this.options.isClose = true;
    },
    // 点击编辑按钮弹出修改系统对话框前的处理
    handleModifyModal(rowData) {
      this.options.isClose = false;
      this.modalOperation = "1";
      this.systemFormData = {
        fldNm: rowData.fldNm,
        varDescr: rowData.varDescr,
        dataTp: rowData.dataTp,
        len: rowData.len,
        decmPointBit: rowData.decmPointBit,
        globalEnumFlg: rowData.globalEnumFlg
      };
      this.modal2 = true;
    },
    // 向后台请求删除系统
    deleteSystem(sysNo) {
      this.$ajax
        .post("/dictDef/delete", {
          fldNm: sysNo
        })
        .then(
          res => {
            let data = res.data;
            if (data.responseCode === "000000") {
              this.$Message.success("删除系统[" + sysNo + "]成功!");
              this.getSystemInfo();
            } else {
              this.$Notice.error({
                title: "删除系统失败,错误信息",
                desc: data.responseMsg,
                duration: 0
              });
            }
          },
          err => {
            this.$Notice.error({
              title: "删除系统失败,错误信息",
              desc: err.message,
              duration: 0
            });
          }
        );
    },
    // 新增/修改系统表单数据组装
    handlePreSendData() {
      return {
        listCd: this.systemFormData.listCd,
        listNum: this.systemFormData.listNum,
        selection: this.selection
      };
    },
     // 文件导出
    exportDict () {
        download(this, '/dict/exportDict',{
        },"数据字典");
    },
    // 新增联系人表单数据组装
    handlePerSendContact() {
      return {
        notiUserid: this.contactFormData.jobId,
        notiUsername: this.contactFormData.name,
        department: this.contactFormData.department,
        phone: this.contactFormData.phone,
        email: this.contactFormData.email,
        douya: this.contactFormData.douya,
        createUser: this.$store.state.user.userName
      };
    },
    // 请求新增系统
    handleIncreaseSubmit(name) {
      if (name === "systemForm") {
        // this.$refs[name].validate(valid => {
        //   if (valid) {
            // this.loading = true;
            let sendData = this.handlePreSendData();
            console.log(sendData)
            // this.$ajax.post("", sendData).then(
            //   res => {
            //     this.loading = false;
            //   },
            //   err => {
            //     this.$Notice.error({
            //       title: "新增数据字典,错误代码",
            //       desc: err.message,
            //       duration: 0
            //     });
            //     this.loading = false;
            //   }
            // );
        //   } else {
            // this.$Message.error("表单校验失败");
        //   }
        // });
      }
    },
    // 请求修改系统信息
    handleModifySubmit(name) {
      if (name === "systemForm") {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.loading = true;
            let sendData = this.handlePreSendData();
            this.$ajax.post("/dictDef/modify", sendData).then(
              res => {
                let data = res.data;
                if (data.responseCode === "000000") {
                  this.options.isClose = true;
                  this.$Message.success({
                    content: "修改数据[" + sendData.fldNm + "]信息成功!",
                    duration: 5
                  });
                  this.modal2 = false;
                  this.handleResetForm("systemForm");
                  this.getSystemInfo();
                } else {
                  this.$Notice.error({
                    title: "修改数据失败,错误信息",
                    desc: data.responseMsg,
                    duration: 0
                  });
                }
                this.loading = false;
              },
              err => {
                this.$Notice.error({
                  title: "修改数据失败,错误代码",
                  desc: err.message,
                  duration: 0
                });
                this.loading = false;
              }
            );
          } else {
            this.$Message.error("表单校验失败");
          }
        });
      }
    },
    // 新增/修改系统表单数据重置
    handleResetForm(name) {
      this.$refs[name].resetFields();
    },
    // 时间格式化
    assembleSystemData(arr) {
      for (let sysItem of arr) {
        sysItem.createTime = datetimeFormat(sysItem.createTime);
      }
      return arr;
    },

    // 获取系统列表数据
    getSystemInfo() {
      this.tableLoading = true;
      let requestUrl = this.fldNm ? "/dictDef/select" : "/dictDef/select";
      this.$ajax
        .post(requestUrl, {
          fldNm: this.fldNm,
          varDescr: this.varDescr,
          page: this.pageConfig.currentPage,
          row: this.pageConfig.pageSize
        })
        .then(
          res => {
            let data = res.data;
            if (data.responseCode === "000000") {
              this.pageConfig.total = data.total;
              this.tableData = this.assembleSystemData(
                this.addIndexNumForData(data.items, this.pageConfig.currentPage)
              );
            } else {
              this.$Notice.error({
                title: "获取数据字典信息失败,错误信息",
                desc: data.responseMsg,
                duration: 0
              });
            }
            this.tableLoading = false;
          },
          err => {
            this.$Notice.error({
              title: "获取数据字典信息失败,错误信息",
              desc: err.message,
              duration: 0
            });
            this.tableLoading = false;
          }
        );
    },

    //数据字典复制
    handleCopyJob(rowData) {
      this.options.isClose = false;
      this.modalOperation = "2";
      this.assembleFormData(rowData);
      this.modal2 = true;
    },

    // 组装新增/修改作业表单数据
    assembleFormData(rowData) {
      this.systemFormData = {
        fldNm: rowData.fldNm,
        varDescr: rowData.varDescr,
        dataTp: rowData.dataTp,
        len: rowData.len,
        decmPointBit: rowData.decmPointBit,
        globalEnumFlg: rowData.globalEnumFlg
      };
    }
  },
  activated() {
    this.getSystemInfo();
  }
};
</script>

<style scoped>
</style>