| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <link rel="stylesheet" href="/resources/unpkg/element-ui@2.15.14/lib/theme-chalk/index.css">
- <link rel="stylesheet" href="/resources/css/flex.css">
- <link rel="stylesheet" href="/resources/css/qimall.css?t=<?= Yii::$app->params['css_cache_time'] ?>"">
- <script src="/resources/unpkg/vue@2.6.10/dist/vue.js"></script>
- <script src="/resources/unpkg/element-ui@2.12.0/lib/index.js"></script>
- <style>
- .table-info-img-text{
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .table-info-img-text .table-info-img{
- width: 50px;
- height: 50px;
- }
- .circle{
- border-radius: 50%;
- }
- </style>
- </head>
- <body>
- <div id="table-data-list">
- <div style="width:1570px;">
- <h3>列表标准样式</h3>
- <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
- <el-table-column label="会员" width="180" >
- <template slot-scope="scope">
- <div class="table-info-img-text">
- <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
- <div slot="error" class="image-slot">
- <el-image class="table-info-img" src="/resources/img/common/default-avatar.png"></el-image>
- </div>
- </el-image>
- <div class="table-info-text">
- <div>{{scope.row.user.nickname}}<span style="color:blue">({{scope.row.user.id}})</span></div>
- <div>{{scope.row.user.mobile}}</div>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="应用标题" prop="title" align="center" max-width="180">
- <template slot-scope="scope">
- <div size="small">{{scope.row.title}}</div>
- </template>
- </el-table-column>
- <el-table-column label="应用名称" prop="name" align="center" max-width="180">
- <template slot-scope="scope">
- <div size="small">{{scope.row.name}}</div>
- </template>
- </el-table-column>
- <el-table-column label="应用封面" prop="name" align="center" max-width="180">
- <template slot-scope="scope">
- <div size="small">
- <el-image class="table-info-img" :src="scope.row.cover">
- <div slot="error" class="image-slot">
- <el-image class="table-info-img" src="/resources/img/common/default-avatar.png"></el-image>
- </div>
- </el-image>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="作者" prop="author" align="center">
- <template slot-scope="scope">
- <div size="small">{{scope.row.author}}</div>
- </template>
- </el-table-column>
- <el-table-column label="应用分组" prop="group" align="center">
- <template slot-scope="scope">
- <div size="small">{{scope.row.group_name}}</div>
- </template>
- </el-table-column>
- <el-table-column label="版本号" prop="version" align="center">
- <template slot-scope="scope">
- <div size="small">{{scope.row.version}}</div>
- </template>
- </el-table-column>
- <el-table-column label="简介" prop="version" align="center" max-width="280" show-overflow-tooltip>
- <template slot-scope="scope">
- <div size="small">{{scope.row.brief_introduction}}</div>
- </template>
- </el-table-column>
- <el-table-column label="状态" prop="group" align="center" max-width="50">
- <template slot-scope="scope">
- <el-button v-if="scope.row.status == 1" size="mini" type="success" icon="el-icon-check" circle></el-button>
- <el-button v-else size="mini" type="danger" icon="el-icon-close" circle></el-button>
- </template>
- </el-table-column>
- <el-table-column label="是否上架" prop="group" align="center">
- <template slot-scope="scope">
- <el-button v-if="scope.row.is_online == 1" size="mini" type="success" icon="el-icon-check" circle></el-button>
- <el-button v-if="scope.row.is_online == 0" size="mini" type="danger" icon="el-icon-close" circle></el-button>
- </template>
- </el-table-column>
- <el-table-column label="操作" min-width="100" align="center">
- <template slot-scope="scope">
- <el-button type="text" @click="operate()">编辑</el-button>
- <el-button type="text" v-if="scope.row.status == 1" @click="operate()">禁用</el-button>
- <el-button type="text" v-if="scope.row.status == 0" @click="operate()">启用</el-button>
- <el-popover placement="right" width="150" trigger="hover">
- <div style="display: flex;flex-direction: column;">
- <el-button type="text" @click="operate()">卸载</el-button>
- <el-button type="text" @click="operate()">更新配置</el-button>
- <el-button type="text" @click="operate()">升级数据库</el-button>
- <el-button v-if="scope.row.is_online == 1" type="text" @click="operate()">下架</el-button>
- <el-button v-if="scope.row.is_online == 0" type="text" @click="operate()">上架</el-button>
- </div>
- <el-button slot="reference" @click.stop style="margin-left: 10px;" size="mini" type="text">更多</el-button>
- </el-popover>
- </template>
- </el-table-column>
- </el-table>
- </div>
-
- </div>
- </body>
- <script>
- const app = new Vue({
- el: '#table-data-list',
- data() {
- return {
- listLoading:false,
- list:[{
- "title": "九宫格",
- "name": "Sudoku",
- "author": "Qimall",
- "cover": "https://shuzixiangdao.oss-cn-guangzhou.aliyuncs.com/images/2021/12/22/image_1640158496_ET0llpJp.png",
- "group": "operate",
- "group_name": "私域运营",
- "status": 1,
- "is_online": 1,
- "version": "1.0.0",
- "brief_introduction":"九宫格抽奖",
- user:{
- "id": 116,
- "mobile": 13200000004,
- "nickname": "test3",
- // "avatar_url": "https://shuzixiangdao.oss-cn-guangzhou.aliyuncs.com/images/2021/12/21/image_1640050882_BGl0tTZa.jpeg",
- "avatar_url": "",
- "parent_id": 115,
- "username": 13200000004
- }
- }],
- }
- },
- });
- </script>
- </html>
|
