@{
    Layout = "_LayoutNewPage.cshtml";
}

<div class="main" id="main" v-cloak>
    <el-breadcrumb class="current-location" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><i class="fa fa-home"></i>附件管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="padding-top-10 padding-bottom-10">
        <el-dropdown>
            <el-button type="default">
                管理菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </el-row>

        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="app" label="应用" align="center"></el-table-column>
                <el-table-column prop="module" label="模块" align="center"></el-table-column>
                <el-table-column prop="position" label="位置" align="center"></el-table-column>
                <el-table-column label="统计" align="center">
                    <el-table-column label="使用中" align="center">1</el-table-column>
                    <el-table-column label="未使用" align="center">2</el-table-column>
                    <el-table-column label="已删除" align="center">3</el-table-column>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="mini" v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
        </template>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#main",
        data: {
            tableData: 
            [{ "app": "default", "module": "sysset", "position": "waterimage" }, { "app": "default", "module": "sysset", "position": "waterimage" }, { "app": "default", "module": "sysset", "position": "waterimage" }, { "app": "default", "module": "sysset", "position": "waterimage" }]
        },
        methods: {
            handleEdit: function (idx,rowData)
            {
                console.log(idx)
            },
            handleDelete: function (idx, rowData) {
                console.log(idx)
            }
        }

    });
</script>