<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.3/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.0.3/lib/index.js"></script>
<style>
.fl{
float:right;
margin-right:20px;
}
.fy{
text-align:center;
margin-top:30px;
}
.title{
height:100%;
}
</style>
</head>
<body>
<div class="title" id="demo">
<div class="container_table">
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
style="width:100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="appname"
label="APP名称"
sortable
width="180">
</el-table-column>
<el-table-column
prop="apkname"
label="包名"
width="180">
</el-table-column>
<el-table-column
prop="type"
sortable
label="类型">
</el-table-column>
<el-table-column
prop="comp_name"
sortable
label="运营企业名称">
</el-table-column>
<el-table-column
prop="type_number"
label="版本号">
</el-table-column>
<el-table-column
prop="update_date"
sortable
label="更新时间">
</el-table-column>
<el-table-column
prop="download_num"
sortable
label="下载量（万）">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-star-on" v-if="istag" @click='switchChange'></el-button>
<el-button type="primary" icon="el-icon-star-off" v-else="!istag" @click='switchChange'></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination class="fy"
layout="prev, pager, next"
@current-change="current_change"
:total="total"
background
>
</el-pagination>
</div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
total:1000,//默认数据总数
pagesize:9,//每页的数据条数
currentPage:1,//默认开始页面
istag: true,
input:"",
input21: '',
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value5: [],
tableData: [
{
appname: '1喵喵直播',
apkname: '1bdkdl',
type: '3视频直播',
comp_name: '1广大科技公司',
type_number: '1V1.2',
update_date: '12016-05-02',
download_num: '123.6'
},
{
appname: '2喵喵直播',
apkname: '2bdkdl',
type: '2视频直播',
comp_name: '2广大科技公司',
type_number: '2V1.2',
update_date: '22016-05-02',
download_num: '223.6'
},
{
appname: '3喵喵直播',
apkname: '1bdkdl',
type: '3视频直播',
comp_name: '3广大科技公司',
type_number: '3V1.2',
update_date: '32016-05-02',
download_num: '323.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
]
},
methods:{
// tableRowClassName({row, rowIndex}) {
// if (rowIndex === 0) {
// return 'th';
// }
// return '';
// },
// switchChange(){
// this.istag = !this.istag ;
//
// },
created:function(){
this.total=this.tableData.length;
},
current_change:function(currentPage){
this.currentPage = currentPage;
}
}
})
</script>
</body>
</html>
网友评论