Vue实现el-table（表单）单列的特殊样式：

1、需求：

修改单列的特殊样式，如下图：

<el-table-column prop="sbzt" label="设备状态" align="left" header-align="center" :show-overflow-tooltip="true">
    <template slot-scope="scope">
       <span :class="[scope.row.sbzt=='0'?'sbzt1':'sbzt2']">{{scope.row.sbzt}}</span>
    </template>
</el-table-column>
此方法使用与后台传过来的是中文

style里面修改样式：
.sbzt1{}
.sbzt2{}

<el-table-column prop="sbzt" label="设备状态" align="left" header-align="center" :show-overflow-tooltip="true">
    <template slot-scope="scope">
       <span :class="[scope.row.sbzt=='0'?'sbzt1':'sbzt2']">{{sbztType[scope.row.sbzt]}}</span>   
    </template>
</el-table-column>

script里面:
data(){
	return{
		sbztType:{
			0:'正常',
			1:'作废',
		}
	}
}
此方法使用与后台传过来的是数字

2、显示checkbox和序号：

<el-table-column type="selection" :reserve-selection='true' align="center" width="55" />
<el-table-column type="index" label="序号" align="center" />

3 、内容左对齐，头部居中对齐：

<el-table-column prop="sbzt" label="设备状态" align="left" header-align="center"
 :show-overflow-tooltip="true" />
// calign="left" header-align="center"  不用设置宽度会自适应

4、Tag的使用：

 <el-table-column prop="isHandle" label="是否处理" sortable :show-overflow-tooltip="true">
    <!-- isHandle是否已处理，1（是）、0（否） -->
    <template slot-scope="scope">
       <el-tag :type="scope.row.isHandle == '1' ? 'success' : 'danger'">
       {{ scope.row.isHandle == '1' ? '已处理' : '未处理' }}
   </template>
</el-table-column>

5、加载动画loading（局部）：

<el-table :data="dataList" v-loading="loading">
	.....
</el-table>

<script>
	data(){
		return{
			loading:true,//默认开启动画
			dataList:[],
		}
	},
	methods:{
		init(){//获取数据
			getPage().then(res=>{
				this.loading=false  //关闭动画
				this.dataList=res.data.data
			}).catch(err=>{
				this.loading=false  //关闭动画
			})
		}
	}
</script>

6、排序sortable ：

<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="variety" label="货名" :show-overflow-tooltip="true" />
<el-table-column prop="netWeight" label="净重(千克)" sortable :show-overflow-tooltip="true" />
<el-table-column prop="money" label="价格(元)" sortable :show-overflow-tooltip="true" />

7、修改Table样式：

<style scoped>
//表格背景
>>>.el-table {
	background: #044B89;
	color: #FFF;
	font-weight: normal;
}
//修改表格的高度
>>>.el-table .el-table__cell {
	padding: 5px 0 !important;
}
//修改行样式
>>>.el-table tr {
	background: #044B89;
	color: #FFF;
	font-weight: normal;
}
//修改hover时的样式
>>>.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
	background: rgb(36, 148, 215);
	color: #FFF;
	font-weight: normal;
}
//active时的样式
>>>.el-table__body tr.current-row>td.el-table__cell {
	background: rgb(4, 75, 137);
	color: #FFF;
	font-weight: normal;
}
</style>