app-big-data/page/bigDataOut/js/handleChangeViewD.js

Vue.component('comD',{
    template:' <div class="tab4">\
    <template>\
      <span>就诊类型：</span>  <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>\
        <span>机构等级：</span>  \
        <el-select v-model="value" placeholder="请选择">\
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">\
                </el-option> \
        </el-select> \
        <a href="">查看药品字典     </a>\
        <el-select v-model="value" placeholder="请选择">\
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">\
                </el-option>\
        </el-select>\
        <div class="search">搜索</div>\
    </template>\
    <el-table :data="tableData" border style="width: 100%"  :data.native="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">\
            <el-table-column prop="province" label="就诊时间" width="180">\
                </el-table-column>\
        <el-table-column prop="name" label="姓名" width="140">\
        </el-table-column>\
        <el-table-column prop="province" label="就诊类型" width="180">\
        </el-table-column>\
        <el-table-column prop="province" label="规格" width="180">\
        </el-table-column>\
        <el-table-column prop="address" label="用法" width="380">\
        </el-table-column>\
        <el-table-column prop="province" label="总量" width="180">\
        </el-table-column>\
        <el-table-column fixed="right" label="操作" width="180">\
            <template slot-scope="scope">\
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>\
            </template>\
        </el-table-column>\
    </el-table>\
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"\
    :page-sizes="[2,10, 20, 40]" :page-size="pagesize" layout="total,sizes,prev, pager, next, jumper"\
    :total="tableData.length">\
</el-pagination>\
</template>\
</div>\
    </div> ',
    data:function(){
        return{
            currentPage: 1, //初始页
            pagesize:2,    //    每页的数据 
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }],
            options: [{
                value: '选项1',
                label: '外科'
            }, {
                value: '选项2',
                label: '住院'
            }],
            option: [{
                value: '选项1',
                label: '全部'
            }, {
                value: '选项2',
                label: '选线一'
            }],
            value: '全部'
        }
    },
    methods: {
        handleSizeChange: function (size) {
            this.pagesize = size;
            console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage)  //点击第几页
        },
        handleClick(row) {
            console.log(row);
          }
    }
})