前言

最近做的vue+elementUI的前端项目需求，分享下遇到了一些关于饿了么组件样式调整的问题以及最终解决方式，多了解一些，为了避坑。

一、el-table

项目中数据展示，el-table组件使用到的地方很多，自己总结了有些需要注意的使用细节，对这一块不清楚的同学，一定好好看看

点击跳转至elementUI

1.el-table 的height属性

简单来讲，就是要让el-table有一个固定的高度；table里面的数据在这个高度下可以进行上下滚动查看

代码如下（示例）：

<el-table
  :data="tableData"
  height="300px"  
 >
</el-table>

解決el-table高度自适应：一般用法，给定一个固定像素值300px；动态用法父级元素百分比70%，或者直接来一个计算值calc(100% - 64px)；

2.el-table 表头及表身style样式调整

代码如下（示例）：

<el-table
  :data="tableData"
  :row-style="{height: '40px'}"
  :cell-style="{padding: '0'}"
  :header-cell-style="{backgroundColor:'#ccc',padding:'0px',height:'40px'}"
  height="calc(100% - 40px)"
>

表身：参照文档給row-style加上height，结果不管用，el-table最小单元是cell（一个单元格），所以需要对应cell的padding值设置0即可，height样式就可以生效；

3.el-table 使用

<el-table
 :data="dataList"
 :header-cell-style="{backgroundColor:'#c7c7c7'}"
 >
   <el-table-column
     type="index"
     label="序號"
     align="center"
   >
   </el-table-column>
   <el-table-column
     type="selection"
     align="center"
   >
   </el-table-column>  
   <el-table-column
     label="姓名"
     prop="name"
     align="center"
   >
   </el-table-column>  
   <el-table-column
     label="地址"
     align="center"
     width="180"
   >
     <template slot-scope="scope">
       <el-link type="primary" @click.prevent="openDetail()">{{scope.row.address}}</el-link>
     </template>
   </el-table-column>
   <el-table-column
     label="操作"
     align="center"
     width="180"
   >
     <template slot-scope="scope">
       <el-button type="text" icon="el-icon-delete" @click="handleDel(scope.row.id)">刪除</el-button>
       <el-button type="text" icon="el-icon-edit" @click="handleMod(scope.row.id)">編輯</el-button>
     </template>
   </el-table-column>
</el-table>
<script>
	export default{
	  data(){
	    return{
		  dataList:[
		    {id:1,name:"zhangsan",address:'ffff'}
		  ],
		}
	  },
	  methods:{
		handleDel(id){
		// 删除
		},
		handleMod(id){
		// 修改
		},
	  }
	}
</script>

以上代码就是el-table的一个基本使用案例。注意到，通过插槽语法可以做到自定义列。比如上面例子，插入了el-link实现该列可点击或者链接下载等，插入el-button满足该行记录可操作，scope.row获取当前行记录，当前就是{id:1,name:“zhangsan”,address:‘ffff’}这条记录，自然也能通过scope.row.属性名获取对应的值

二、el-row、el-col布局（layout）

1.案例使用

通过el-row和el-col默契的ko组合，可以满足大部分对于布局方面的需求。上手也是非常简单的，具体使用看下面代码：

<el-row :gutter="20">
  <el-col :span="6"><div class="colOne"></div></el-col>
  <el-col :span="6" :offset="6">div class="colTwo"></div></el-col>
  <el-col :span="6">div class="colThree"></div></el-col>
</el-row>

效果图如下：

理解：el-row把上级父元素宽度划分成24份，所以每份的宽度是根据包含el-row盒子的宽度的1/24；el-col定义列
常用属性：
:span= 给定指定占份
:gutter：定义el-col之间的间距，默认是没有间距的，单位默认px
type：布局模式，支持flex弹性布局
justify:可选值start/end/center/space-around/space-between
:offset：当前el-col向右的一个偏移占份

三、el-upload 拖拽上传

1、el-upload 拖拽样式修改不了

1、使用el-upload拖拽，发现样式不适合，一般来说按下面样式修改就OK了

/* 拖拽上传样式 ，自定义宽高*/
.el-upload{
  .el-upload-dragger{
    width: 250px ;
    height: 150px;
    .el-icon-upload{
      margin: 20px 0 16px;
    }
  }
}

2、样式也添加了，没有效果？看看下面方式

/* 方式一  去掉 scoped屬性*/
<style rel="stylesheet/scss" lang="scss">
  // 去掉 scoped屬性
</style>

/* 方式二  通过外部引入样式的方法*/
<style rel="stylesheet/scss" lang="scss" scoped>
  // upload.scss写上修改样式，导入；需要全局使用就在main.js上进行全局导入样式
  @import '@/assets/style/upload.scss';  // 注意：分号必写，不然会报错
</style>

总结

总结来说，使用elementUI组件库，首先参考官方文档，其次就是扩充案例学习，以上的文章内容也是我参考官方文档以及自己实际开发需求中碰到的问题总结而来，存在不正确的地方，可以帮忙指正！学习共勉。