//vue文件
<template>
<div class="table">
//这里的dataList就是computed里面的dataList
<el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" >
<el-table-column prop="deviceTypeName" label="柜子类型名称" align="center" highlight-current-row="true">
</el-table-column>
<el-table-column prop="deviceTypeIntroduce" label="柜子类型说明" align="center"highlight-current-row="true">
</el-table-column>
</div>
</template><script>
export default {
name: "basetable",
data(){
return{
tableData:[],
}
}，
computed: {
dataList() {
//这里的 this.tableData是请求接口得到的数据
let liArr = this.tableData;
if(liArr .length>0){
for (var i = 0; i < liArr.length; i++) {
if (liArr[i].status == 0) {
liArr[i].status = "启用";
} else if (liArr[i].status == 1) {
liArr[i].status = "停用";
}
if (liArr[i].line == 0) {
liArr[i].line = "离线";
} else if (liArr[i].line == 1) {
liArr[i].line = "在线";
}
}
return liArr;
}
}
},
}
</script>
3.table表格的排序、筛选
//有时候需要对表格进行排序或者筛选，查看或对比需要的数据，这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。
//vue文件
<template>
<div class="table">
// 将filter-change方法、sort-change方法放在el-table里面
<el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" @filter-change="handleFilterChange" @sort-change='handleSortChange'>
//列中设置filters属性即可开启该列的筛选，filter-multiple是否多选
<el-table-column
prop="status" column-key="status" label="启用状态" align="center" :filters="[{ text: '启用', value: '启用' }, { text: '停用', value: '停用' }]" filter-placement="bottom" :filter-multiple="ismultiple" >
<template slot-scope="scope">
<span v-if="scope.row.status=='启用' " style="color:green">{{ scope.row.status }}</span>
<span v-else style="color: red" >{{ scope.row.status }}</span>
</template>
</el-table-column>
//在列中设置sortable属性即可实现以该列为基准的排序
<el-table-column prop="deviceTypeIntroduce" label="涨幅" sortable align="center" highlight-current-row="true">
</el-table-column>
</el-table>
