✨ feat(曲库管理): 添加期刊跳转

src/views/song/index.vue

@@ -92,6 +92,7 @@
         @selection-change="handleTableSelectionChange"
         :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
         border
+        style="overflow-x:always"
         fit
       >
         <el-table-column type="selection" width="55"> </el-table-column>
@@ -117,9 +118,14 @@
           </template>
         </el-table-column>
         <el-table-column prop="duration" label="时长"></el-table-column>
-        <el-table-column label="关联期刊">
+        <el-table-column label="关联期刊" width="200">
           <template slot-scope="scope">
-            <span v-for="j in scope.row.journal" :key="j + ''">{{ j }}</span>
+            <div v-for="j in scope.row.journals" :key="j + ''">
+              <el-button type="text" size="mini" @click="jumpToJournal(j.id)">{{
+                "VOL " + j.journalNo + " " + j.title
+              }}</el-button>
+              <br />
+            </div>
           </template>
         </el-table-column>
         <el-table-column
@@ -155,7 +161,7 @@
             ></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="280">
+        <el-table-column label="操作" width="280" fixed="right">
           <template slot-scope="scope">
             <el-button
               plain
@@ -666,6 +672,9 @@ export default {
       this.musicModifyDialog.data = {};
       this.musicModifyDialog.visible = false;
     },
+    jumpToJournal(id) {
+      this.$router.push(`/journal/detail?id=${id}`);
+    },
     // ************************* 上传事件 *************************
     handleRemove(file, fileList) {
       console.log(file, fileList);
@@ -759,4 +768,18 @@ export default {
   letter-spacing: normal;
   color: #333333;
 }
+.el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px; /*滚动条宽度*/
+  height: 8px; /*滚动条高度*/
+}
+.el-table__body-wrapper::-webkit-scrollbar-track {
+  border-radius: 10px; /*滚动条的背景区域的圆角*/
+  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
+  background-color: #eeeeee; /*滚动条的背景颜色*/
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 10px; /*滚动条的圆角*/
+  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
+  background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
+}
 </style>