fj-dc-ui/.svn/pristine/b2/b2de3a0e83e396586160cac2d1114dd776f164f4.svn-base

<template>
  <el-container>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title-card">流程查询</span>
        <div class="headerBtn">
          <el-button type="primary">刷新</el-button>
        </div>
      </div>
      <div  class="text item">
        <el-table
          :data="tableData"
          :height="tableHeight"
          border
          ref="taskTable"
          class="taskTable">
          <el-table-column
            prop="id"
            label="流程名称"
            width="400">
          </el-table-column>
          <el-table-column
            prop="name"
            label="当前节点名称">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="流程类型">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="流程发起人">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="上一节点处理人">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="流程发起时间">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="上一节点提交时间">
          </el-table-column>
        </el-table>
        <el-pagination background  :pager-count="5" :current-page="pageIndex"
                       :page-size="pageSize"
                       layout="total, prev, pager, next" :total="total"
                       @current-change="pageIndexChange"
        ></el-pagination>
      </div>
    </el-card>
  </el-container>
</template>
<script>
  export default {
    components: {

    },
    data() {
      return {
          tableHeight:0,
          pageIndex:1,
          pageSize:10,
          total:100,
          tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
          }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
          }, {
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
          }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
          }, {
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
          }]
      }
    },
    computed: {

    },
    activated() {

    },
    created(){

    },
    mounted(){

        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 210;
            var _self = this;
            window.onresize = function() {
                _self.tableHeight = window.innerHeight - 210;
            }

        })
    },
    methods: {
        pageIndexChange(val){
            this.pageIndex = val;
        }
    },
    watch: {
    }
  }
</script>
<style scoped>
  .el-container {
    width: 100%;
    height:100%;
    background: red;
  }
  .box-card{
     width: 100%;
  }
  .headerBtn{
     margin-top: -3px;
     width: 100px;
     float:right;
  }
  .taskTable{
     width: 100%;
  }
  .title-card{
    font-weight: bold;
  }
</style>