table样式属性详解，table样式如何设置-励北网

 <el-table-column type="selection" width="55" align="center"/>
  <el-table-column label="序号" type="index" width="55" align="center"/>
  <el-table-column label="设备分类编码" align="center" prop="deviceCode"/>
  <el-table-column label="设备分类名称" align="center" prop="deviceName"/>
  <el-table-column label="上级" align="center" prop="parentId">
    <tempate slot-scope="scope">
      <template v-if="scope.row.parentId==0">无</template>
      <template v-else>{{filtration(scope.row.parentId)}}</template>
    </tempate>
  </el-table-column>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button size="mini" type="text" icon="el-icon-edit" @click="edit(scope.row)" 
      >修改</el-button>
      <el-button size="mini" type="text" icon="el-icon-delete" @click="del(scope.row)"
       >删除</el-button>
    </template>
  </el-table-column>
</el-table>

table样式属性详解，table样式如何设置

上面是一个基础表格，他的数据组成是一个数组包含很多条对象，每个对象里面有对应的key,和value,渲染页面的也很简单，只需要把数组赋值给'':data''就可以了，每个el-table-column,就是一个表头，label='这里是表头的名字'，prop='这里就是对应每条对象的key名'，如果对应正确的话那么页面就已经渲染出来了会是下面这个样子，

table样式属性详解，table样式如何设置

下面来讲解table的样式属性：

1，带斑马纹表格（属性stripe）只需在el-table内加上 stripe 就可以实现，效果如下：

table样式属性详解，table样式如何设置

2，带边框表格（属性border），只需在el-table内加上 border就可以实现，效果如下：

table样式属性详解，table样式如何设置

3，带状态表格（属性row-class-name），只需在el-table内加上:row-class-name="tableRowClassName"声明一个事件，然后在methods方法中定义事件：

tableRowClassName({row, rowIndex}) {

if (rowIndex === 1) {

return'warning-row'; } elseif (rowIndex === 3) {

return'success-row'; } return''; }

然后在style中添加两个样式

.el-table .warning-row {background: oldlace;}

.el-table .success-row { background: #f0f9eb;}效果如下：

table样式属性详解，table样式如何设置

4，固定列，横向内容过多时，可选择固定列，在需要固定的列中加入 fixed="right"属性，效果如下：

table样式属性详解，table样式如何设置

5，table表头内容居中，需要在el-table-column中加入 align="center"：效果和第一个图效果一样。

6，多级表头：只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。示例：

<el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column>

效果如下：

table样式属性详解，table样式如何设置

7,选中行高亮：只需要在el-table内加入属性highlight-current-row 效果如下：

table样式属性详解，table样式如何设置

8，展开行，当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。代码如下：

<el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="商品名称"> {{ props.row.name }} </el-form-item> <el-form-item label="所属店铺"> {{ props.row.shop }} </el-form-item> <el-form-item label="商品 ID"> {{ props.row.id }} </el-form-item> <el-form-item label="店铺 ID"> {{ props.row.shopId }} </el-form-item> <el-form-item label="商品分类"> {{ props.row.category }} </el-form-item> <el-form-item label="店铺地址"> {{ props.row.address }} </el-form-item> <el-form-item label="商品描述"> {{ props.row.desc }} </el-form-item> </el-form> </template> </el-table-column>

单独写一个el-table-column,在里面加入type="expand"属性就可以了，在插槽内渲染数据效果如下：

table样式属性详解，table样式如何设置