vue 点击查看详情在该行后追加一个tr显示详情

vue 点击 查看详情 在该行后追加一个 tr 显示详情

效果（点击查看详情，在这个tr下显示出来详细信息）：

显示详细信息：

数据结构：

data() {
    return {
    　　packages: [],
    　　currentActive:-1,
　　　　 file:{}
    }
},

html部分：

注意使用<template>虚元素将两行tr包裹起来。

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>版本号</th>
            <th>文件个数</th>
            <th>总共大小</th>
            <th>发布时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <template v-for="(package, index) in packages">
            
　　　　　　　　<tr :class="{info: index == currentActive, success: index == 0 && package.status == 1}">
                <td>{{index + 1}}</td>
                <td>{{package.name}}</td>
                <td>{{package.total}}</td>
                <td>{{package.total_size}}</td>
                <td>{{package.publish_time}}</td>
                <td>
                    <span v-if="package.status == 1">最新发布</span>
                </td>
                <td>
                    <button class="btn btn-danger btn-xs" role="button" @click="doDelete(package, index)">删除</button>
                    <button class="btn btn-success btn-xs" role="button" @click="doPublish(package)">发布</button>
                    <button class="btn btn-primary btn-xs" role="button" @click="loadDetail(package, index)">查看详情&nbsp;<span class="caret"></span></button>
                </td>
            </tr>


            <tr v-show="index == currentActive">
                <td colspan="7">
                    <div class="panel panel-primary">
                        <div class="panel-heading">详细信息
                            <button type="button" @click="currentActive = -1" class="close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-hover" v-if="package.upgrades && Object.keys(package.upgrades).length">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <td>文件名称</td>
                                            <td>版本号</td>
                                            <td>下载路径</td>
                                            <td>操作</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(upgrade, index) in package.upgrades">
                                            <td>{{index + 1}}</td>
                                            <td>{{upgrade.name}}</td>
                                            <td>{{upgrade.version_name}}</td>
                                            <td>{{upgrade.download_path}}</td>
                                            <td>
                                                <button class="btn btn-danger btn-xs" role="button" @click="doDeleteUpgrade(package, upgrade, index)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                            </table>
                            <form class="form-inline pull-right">
                                <div class="form-group">
                                    <a href="javascript:;" class="file">选择文件
                                        <input type="file" v-on:change="file_change" accept=".apk">
                                    </a>
                                    <span class="text-info">{{file.name ? file.name : '未选择任何文件' }}</span>
                                    
                                </div>
                                <button type="button" @click="submit(package)" class="btn btn-primary btn-sm">确认上传</button>
                                
                            </form>
                        </div>
                    </div>               
                </td>
            </tr>
        </template>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7">总计：{{packages.length}} 条记录</td>
        </tr>
    </tfoot>
</table>

packages数据格式：

[
    {
        "id": 11,
        "name": "KTC-E6800-V001",
        "uploader": 1,
        "total_size": "577.33KB",
        "status": "1",
        "publish_time": "2018-03-15 10:36:52",
        "type": "0",
        "created_at": "2018-03-15 10:36:20",
        "updated_at": "2018-03-15 10:36:52",
        "total": 2,
        "upgrades": [
            {
                "id": 47,
                "path": "5aa9dc340c95b.apk",
                "name": "HsWebSocket.apk",
                "package_name": "com.android.finger",
                "package_id": 11,
                "version_name": "KTC-E6800-V001",
                "version_code": "1",
                "md5": "df02eaf0cdf35ab6aae44eddce3e492e",
                "file_size": 295591,
                "state": "1",
                "publish_time": "2018-03-15 10:36:52",
                "type": "0",
                "uploader": 1,
                "desc": null,
                "created_at": "2018-03-15 10:36:36",
                "updated_at": "2018-03-15 10:36:52",
                "download_path": "http://www.vue.com/storage/5aa9dc340c95b.apk",
                "model": null
            },
            {
                "id": 48,
                "path": "5aa9dc3d7a1ac.apk",
                "name": "HsWebSocket.apk",
                "package_name": "com.android.finger",
                "package_id": 11,
                "version_name": "KTC-E6800-V001",
                "version_code": "1",
                "md5": "df02eaf0cdf35ab6aae44eddce3e492e",
                "file_size": 295591,
                "state": "1",
                "publish_time": "2018-03-15 10:36:53",
                "type": "0",
                "uploader": 1,
                "desc": null,
                "created_at": "2018-03-15 10:36:45",
                "updated_at": "2018-03-15 10:36:53",
                "download_path": "http://www.vue.com/storage/5aa9dc3d7a1ac.apk",
                "model": null
            }
        ]
    },
    {
        "id": 9,
        "name": "K438-v001",
        "uploader": 1,
        "total_size": "0.00B",
        "status": "0",
        "publish_time": null,
        "type": "0",
        "created_at": "2018-03-15 10:19:39",
        "updated_at": "2018-03-15 10:36:52",
        "total": 0,
        "upgrades": []
    },
    {
        "id": 10,
        "name": "K438",
        "uploader": 1,
        "total_size": "0.00B",
        "status": "0",
        "publish_time": null,
        "type": "0",
        "created_at": "2018-03-15 10:19:44",
        "updated_at": "2018-03-15 10:36:52",
        "total": 0,
        "upgrades": []
    }
]

javascript部分：

<script>
    export default {
        data() {
            return {
                packages: [],
                currentActive:-1,
                file:{},
            }
        },
        mounted() {
            this.load_data()
        },
        methods: {
            load_data () {
                var ax = axios.get('packages'),
                    me = this;
                ax.then((response) => {
                    me.packages = response.data
                })
            },
            doDelete (item, index) {
                let me = this;
                me.$reused.del('packages/' + item.id, () => {
                    me.packages.splice(index, 1);
                    me.$reused._alertSuccess();
                }, item.path);
            },
            doDeleteUpgrade (package_, upgrade, index){
                let me = this;
                me.$reused.del('upgrade/' + upgrade.id, () => {
                    package_.upgrades.splice(index, 1);
                    me.$reused._alertSuccess();
                    me.file = {};
                }, upgrade.path);
            },
            doPublish (pack, index) {
                let ax = axios.put(`packages/${pack.id}/publish`),
                    me = this;
                    console.log(ax);
                ax.then((response) => {
                    me.load_data()
                    me.$reused._alertSuccess();
                });
            },
            loadDetail (item, index){
                if(this.currentActive == index){
                    this.currentActive = -1;
                }else{
                    this.currentActive = index;
                }
            },
            file_change (e) {
                this.file = e.target.files[0];
            },
            submit (item) {
                let me = this,
                data   = new FormData();
                data.append('file', me.file);
                data.append('key', 'news');
                data.append('package_id', item.id);
                axios.post('upgrade', data)
                    .then(function (response) {
                        item.upgrades.push(response.data)
                        me.$reused._alertSuccess();
                        me.file = {};
                    });
            }
        }
    }
</script>

 

转载于:https://www.cnblogs.com/love-snow/articles/8572348.html