<template>

	<div style="width: 100%">
			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item >首页</el-breadcrumb-item>
		  			<el-breadcrumb-item>监测任务</el-breadcrumb-item>
		  			<el-breadcrumb-item>专项监测</el-breadcrumb-item>
		  			<el-breadcrumb-item>牵头报告单位列表</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			 <div>
				<!-- 下拉菜单 -->
                <el-select v-model="value" placeholder="请选择">
                	<el-option
                    	v-for="item in options"
                    	:key="item.value"
                    	:label="item.label"
                    	:value="item.value">
                	</el-option>
                </el-select>
                <!-- 返回按钮 -->
                <el-button class="btns" type="info" size="small" @click="returnTask">
					返回任务列表
				</el-button>
            </div>
			<!-- 表格 -->
			<el-table  :data="tableData"  style="width: 100%">
      			<el-table-column
        		prop="num"
        		label="序号"
        		width="80">
      			</el-table-column>
      			<el-table-column
        		prop="year"
        		label="年份"
        		width="80">
      			</el-table-column>
      			<el-table-column
        		prop="task"
        		label="所属任务"
				width="200">
      			</el-table-column>
				  <el-table-column
        		prop="company"
        		label="单位"
				width="120">
      			</el-table-column>
				   <el-table-column
        		prop="reportname"
        		label="报告名称"
				width="200">
      			</el-table-column>
				  <el-table-column
        		prop="state"
        		label="状态"
				width="80">
      			</el-table-column>
				  <el-table-column
        		prop="operation"
        		label="操作"
				width="80">
      			</el-table-column>
    		</el-table>
	<!--分页器区域-->
			<div class="block">
				 <el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 25, 50, 100]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
    			</el-pagination>
			</div>
	
	</div>
</template>
<script>
export default {
	data() {
      return {
		  		currentPage: 1,
        options: [{
          value: '选项1',
          label: '测试1'
        }, {
          value: '选项2',
          label: '测试2'
        }, {
          value: '选项3',
          label: '测试3'
        }, {
          value: '选项4',
          label: '测试4'
        }],
        value: '',
		total:0
      }
    },
	methods:{
		returnTask()
		{
			this.$router.push('specialMonitor')
		},
		handleSizeChange(val) {
        	console.log(`每页 ${val} 条`);
      		},
      		handleCurrentChange(val) {
        		console.log(`当前页: ${val}`);
      		}
	}
}
</script>


<style>
.btns{
	float:right;
}
</style>