Vue开发记录

1、解决表格el-table多出一条横线

1.1、现象

<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址">
  </el-table-column>
</el-table>

数据渲染会多出来一条线

1.2、解决方案

<style scoped lang="scss">
/* 隐藏伪元素 */
::v-deep.el-table::before {
  display: none!important;
}
/* 重现下自带下边框线 */
.el-table--border {
  border-bottom: 1px solid #fff!important;
}
</style>

2、el-row高度问题

2.1、现象

<el-row :gutter="20">
  <el-col :span="12">
    <el-card>
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-card>
    </el-card>
  </el-col>
</el-row>

2.2、解决方案

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  };
  display: flex;
  flex-wrap: wrap
}
.el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}