table 样式

src/views/classification/index.vue

@@ -20,7 +20,7 @@
         <el-select
           v-model="value2"
           style="display:inline-block; float:left; margin-left:15px; width:150px"
-          placeholder="所谓分类"
+          placeholder="所属分类"
         >
           <el-option
             v-for="item in options2"
@@ -39,64 +39,79 @@
           type="primary"
           icon="el-icon-circle-plus-outline"
           @click="dialogFormVisible = true"
-        >新建权限</el-button>
+        >新建分类</el-button>
       </div>
     </div>
 
     <breadcrumb class="breadcrumb-container" />
-
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column
-        type="selection"
-        width="55"
-      />
-      <el-table-column label="等级" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.level }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="名称" width="200">
-        <template slot-scope="scope">
-          <a style="margin-left: 10px" @click="toRouer()">{{ scope.row.name }}</a>
-        </template>
-      </el-table-column>
-      <el-table-column label="所属分类" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.sort }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="播放次数" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.time }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="访问量" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.traffic }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="格式" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.type }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.status }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="dialogFormVisible = true,sort=true ;">修改</el-button>
-          <el-button size="mini" type="success" @click="handleModifyStatus(row,'published')">上架</el-button>
-          <el-button size="mini" type="info " @click="handleModifyStatus(row,'published')">分配</el-button>
-          <el-button size="mini" @click="handleModifyStatus(row,'published')">查看</el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
+    <el-tabs type="border-card">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column label="名称" width="300">
+          <template slot-scope="scope">
+            <a style="margin-left: 10px" @click="toRouer()">{{ scope.row.name }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column label="权限标签" width="250">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.permissions }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="250">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="级别" width="250">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.level }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="dialogFormVisible = true,sort=true ;">修改</el-button>
+            <el-button size="mini" type="success" @click="handleModifyStatus(row,'published')">上架</el-button>
+            <el-button size="mini" type="info " @click="handleModifyStatus(row,'published')">分配</el-button>
+            <el-button size="mini" @click="handleModifyStatus(row,'published')">查看</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tabs>
     <el-pagination style="margin-top:50px" background layout="prev, pager, next" :total="1000" />
+    <!-- 新建分类的模态框 -->
+    <el-dialog title="新建分类" :visible.sync="dialogFormVisible" top="8vh">
+      <el-form :model="form">
+        <el-form-item label="填写名称" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="权限标签" :label-width="formLabelWidth">
+          <template>
+            <el-checkbox-group v-model="form.sort">
+              <el-checkbox label="标签1" />
+              <el-checkbox label="标签2" />
+              <el-checkbox label="标签3" />
+              <el-checkbox label="标签4" />
+              <el-checkbox label="标签1" disabled />
+            </el-checkbox-group>
+          </template>
+        </el-form-item>
+        <el-form-item label="分类级别" :label-width="formLabelWidth">
+          <el-select v-model="form.type" placeholder="请选择分类级别">
+            <el-option label="一级" value="视频" />
+            <el-option label="二级" value="音频" />
+            <el-option label="三级" value="图片" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer ">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -110,58 +125,46 @@ export default {
     return {
       tableData: [
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         },
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         },
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         },
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         },
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         },
         {
-          level: '一级',
-          sort: '教育',
-          name: '王小虎',
-          time: '2016-05-02',
-          traffic: '54545',
-          type: '视频',
-          status: '下架'
+          name: '卢本伟',
+          permissions: '所有人可见',
+          type: '',
+          status: '下架',
+          level: '一级'
         }
       ],
       options1: [
@@ -198,7 +201,17 @@ export default {
       ],
       value1: [],
       value2: [],
-      input: ''
+      input: '',
+      dialogFormVisible: false,
+      form: {
+        name: '',
+        sort: [],
+        type: '',
+        delivery: false,
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '120px'
     }
   },
   methods: {
@@ -214,3 +227,4 @@ export default {
   margin-bottom: 65px;
 }
 </style>
+

src/views/database/index.vue

@@ -43,60 +43,62 @@
       >新建资料</el-button>
       <el-button class="inline-block" type="primary" icon="el-icon-open">批量上架</el-button>
     </div>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column
-        type="selection"
-        width="55"
-      />
-      <el-table-column label="名称" width="300">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.name }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="所属分类" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.sort }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="播放次数" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.time }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="访问量" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.traffic }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="格式" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.type }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="200">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.status }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="dialogFormVisible = true,sort=true ;">修改</el-button>
-          <el-button size="mini" type="success" @click="handleModifyStatus(row,'published')">上架</el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-tabs type="border-card">
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%" highlight-current-row="true">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column label="名称" width="300">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属分类" width="200">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.sort }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="播放次数" width="200">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.time }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="访问量" width="200">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.traffic }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="格式" width="200">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.type }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="200">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="dialogFormVisible = true,sort=true ;">修改</el-button>
+            <el-button size="mini" type="success" @click="handleModifyStatus(row,'published')">上架</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tabs>
 
     <el-pagination style="margin-top:50px" background layout="prev, pager, next" :total="1000" />
 
-    <el-dialog title="新建资料" :visible.sync="dialogFormVisible" @close="$refs['addForm'].resetFields()">
+    <el-dialog title="新建资料" :visible.sync="dialogFormVisible" top="8vh">
       <el-form :model="form">
         <el-form-item label="填写名称" :label-width="formLabelWidth">
           <el-input v-model="form.name" autocomplete="off" />
         </el-form-item>
         <el-form-item label="所属分类" :label-width="formLabelWidth">
           <template>
-            <el-checkbox-group v-model="checkList">
+            <el-checkbox-group v-model="form.sort">
               <el-checkbox label="分类1" />
               <el-checkbox label="分类2" />
               <el-checkbox label="分类3" />
@@ -125,8 +127,6 @@
             list-type="picture-card"
             :limit="limitNum"
             :on-exceed="numberOverflow"
-            :on-success="handleSuccess"
-            :on-error="handleError"
           >
             <i class="el-icon-plus" />
             <div slot="tip" class="el-upload__tip">封面只能上传jpg/png，且不超过2M</div>
@@ -153,7 +153,7 @@
           </el-upload>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer ">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
       </div>
@@ -220,6 +220,7 @@ export default {
           status: '下架'
         }
       ],
+      loading: false,
       options2: [
         {
           value: '选项1',
@@ -254,10 +255,8 @@ export default {
       dialogFormVisible: false,
       form: {
         name: '',
-        region: '',
+        sort: [],
         type: '',
-        date1: '',
-        date2: '',
         delivery: false,
         resource: '',
         desc: ''
@@ -314,3 +313,8 @@ export default {
   margin-left: 15px;
 }
 </style>
+<style lang="scss">
+.el-table td, .el-table th {
+            text-align: center;
+        }
+</style>