<template>
<div class="table-demo">
<el-table
:data="tableData"
:header-cell-style="{background:'#DCDFE6'}"
border
style="width: 100%"
>
<el-table-column prop="date" label="订单ID" width="180"></el-table-column>
<el-table-column prop="name" label="类型" width="180"></el-table-column>
<el-table-column prop="address" label="产品"></el-table-column>
<el-table-column prop="address" label="开始时间"></el-table-column>
<el-table-column prop="address" label="交付时间"></el-table-column>
<el-table-column prop="progress" label="机加车间进度">
<template slot-scope="scope">
<el-progress
type="line"
:text-inside="true"
:percentage="scope.row.progress"
:color="scope.row.color"
></el-progress>
</template>
</el-table-column>
<el-table-column prop="progress" label="焊接车间进度">
<template slot-scope="scope">
<el-progress
type="line"
:text-inside="true"
:percentage="scope.row.progress"
:color="scope.row.color"
></el-progress>
</template>
</el-table-column>
<el-table-column prop="progress" label="装配车间进度">
<template slot-scope="scope">
<el-progress
type="line"
:text-inside="true"
:percentage="scope.row.progress"
:color="scope.row.color"
></el-progress>
</template>
</el-table-column>
</el-table>
<div class="pagingo">
<el-pagination
@current-change="handleCurrentChange"
background
:page-sizes="[5]"
:current-page.sync="page"
layout="total, sizes, prev, pager, next, jumper"
:total="30"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "tabledemo",
data() {
return {
page:1,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普",
progress: 50,
color: "red"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀",
progress: 60,
color: "yellow"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀",
progress: 70,
color: "green"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普",
progress: 80,
color: "blue"
}
]
};
},
mounted() {},
methods: {
handleCurrentChange(val){
},
}
};
</script>
<style lang="less" scoped>
.table-demo /deep/ .el-progress-bar__outer {
height: 16px !important;
// line-height: 16px;
position: relative;
}
.table-demo /deep/ .pagingo {
width: 70%;
margin: 20px auto;
overflow-x: auto;
}
.table-demo /deep/ .el-pagination{
text-align: center;
}
</style>