<!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" >
? <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="運(yùn)營企業(yè)名稱">
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="type_number"
? ? ? ? label="版本號">
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="update_date"
? ? ? ? sortable
? ? ? ? label="更新時(shí)間">
? ? ? </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,//默認(rèn)數(shù)據(jù)總數(shù)
? ? ? pagesize:9,//每頁的數(shù)據(jù)條數(shù)
? ? ? currentPage:1,//默認(rèn)開始頁面
? ? ? istag: true,
? ? ? input:"",
? ? ? input21: '',
? ? ? options: [{
? ? ? ? value: '選項(xiàng)1',
? ? ? ? label: '黃金糕'
? ? ? }, {
? ? ? ? value: '選項(xiàng)2',
? ? ? ? label: '雙皮奶'
? ? ? }, {
? ? ? ? value: '選項(xiàng)3',
? ? ? ? label: '蚵仔煎'
? ? ? }, {
? ? ? ? value: '選項(xiàng)4',
? ? ? ? label: '龍須面'
? ? ? }, {
? ? ? ? value: '選項(xiàng)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>
