vue-element-table

<<span class="hljs-name">el-table :data="tableData" style="width: 100%">


1,

empty-text="暂无数据"

2, stripe  斑马纹

3，:data="tableData"  必须参数

4，size="small" 尺寸

5，highlight-current-row  高亮当前行

6，@row-click="tableRowClick"  单击行事件，获取行数据

7，:row-class-name="tableRowClassName"   控制行的样式

8，:header-cell-style="tableHeaderRowStyle"   控制表头的样式

9，style="width: 100%"  table 的宽度

10, loading
      
   v-loading="firstTableLoading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)"
   empty-text="暂无数据"
   11， 排序
   在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
   

:default-sort = “{prop: ‘date’, order: ‘descending’}”

列


sortable

表头样式

tableHeaderRowStyle({rowIndex,}) {
                if (rowIndex === 0) {
                    return 'background: #409EFF;color: #fff;font-weight: 500;font-size:13px;'
                }
            },

行样式控制

tableRowClassName({row,}) {
                // 行样式
                if (row.Recommanded) {
                    return 'warning-row';
                } else if (row.Specialed) {
                    return 'success-row';
                }
                return '';
            },

事件

// 单击
@row-click="firstTableRowClick"
firstTableRowClick(row, column, event){
		this.currentRow = row;
		// do some
}
// 双击
@row-dblclick="firstTableRowDbClick"
firstTableRowDbClick(row, column, event){
	this.currentRow = row;
	# do some
}

二，列的属性

1，slot-scope=“props”> 自定义魔板

2，show-overflow-tooltip 超出宽度 显示。。。,并显示提示 列的属性

3，type=“expand” 展开列

4，fixed 固定列 默认left

5,:formatter=“dateFormat” 时间格式
// table 日期格式化
dateFormat(row, column,){
let str = column.property
if (row[str]===null){
return null
}else {
return parseTime(row[str]) // parseTime 在utils中
}
},

6， 操作列

 <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>

问题：

EL-Table获得选中的行
http://blog.sina.com.cn/s/blog_8a15f6af0102z17k.html

修改高亮当前行的样式

//下面通过修改原插件的样式来显示点击的当前行，注意由于是原插件全局的，所以style不能使用scope属性 .el-table .current-row > td { background: #f39a69 !important; }

element-ui 的 table 组件 无法设置行高的问题
因为需要改变table组件的 行高；试了好多方法；包括官方文档提供的方法cell-style，cell-class-name，虽然能加上样式但是没有效果，不知道啥原因，最后 发现 td 下面有个 class 为 cell 的div,于是修改如下
.cell{max-height: 18px !important;}
经测试成功