xcx

src/pages/system/courseManager/courseList/index.vue

           <template slot-scope="scope">
             <el-button
               size="mini"
-              type="success">添加课程详情</el-button>
+              type="success"
+              @click="addDetail(scope.row)">添加课程详情</el-button>
             <el-button
               size="mini"
               type="warning"
       layout="prev, pager, next, jumper"
       :total="courses.pagenum">
     </el-pagination>
+    <el-dialog
+      title="课程详情"
+      :visible.sync="centerDialogVisible"
+      width="500px"
+      center>
+      <ul>
+        <li class="flex-h" style="align-items: flex-start;">
+          <span>课程详情图片：</span>
+          <div class="flex-item">
+            <div>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="editCourseDetail.newImg" :src="editCourseDetail.newImg" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+          </div>
+          <el-button
+            size="mini"
+            type="success"
+            v-if="editCourseDetail.newImg"
+            @click="addThisImg">确定添加图片</el-button>
+        </li>
+      </ul>
+      <el-table
+        :data="currentCourseDetail"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="img"
+          label="图片">
+          <template slot-scope="scope">
+            <img :src="scope.row.img" alt="">
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="sort"
+          label="排序">
+          <template slot-scope="scope">
+            <el-input
+              placeholder="请输入内容"
+              v-model="scope.row.sort"
+              :disabled="scope.row.edit ? false : true">
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="success"
+              v-if="!scope.row.edit"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              v-if="scope.row.edit"
+              @click="sureSort(scope.$index, scope.row)">确认</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
   name: '',
   data () {
     return {
+      currentCourseDetail: [{
+        img: '',
+        sort: 1,
+        edit: false,
+      }],
+      editCourseDetail: {
+        newImg: '',
+        list: [],
+      },
+      centerDialogVisible: false, // 课程详情弹窗显隐
       total: 0,
       postData: { // 表格搜索条件
         caseid: '', // 案场id
     }
   },
   methods: {
+    deleteItem (index, item) { // 删除图片
+
+    },
+    sureSort (index, item) { // 确认图片排序
+      this.currentCourseDetail[index].edit = false
+    },
+    editItem (index, item) { // 编辑图片排序
+      this.currentCourseDetail[index].edit = true
+    },
+    addThisImg () { // 添加图片到课程详情
+
+    },
+    handleAvatarSuccess (res, file) {
+      this.editCourseDetail.newImg = res.result.url
+    },
+    addDetail (val) { // 添加课程详情
+      this.centerDialogVisible = true
+    },
     ...mapCourseActions([
       'GetCourseList',
       'Public',
         type: 'warning'
       })
         .then(() => {
-          this.DelCourse({id: row.CourseId, callback: this.delCallBack})
+          this.DelCourse({ id: row.CourseId, callback: this.delCallBack })
         })
         .catch(() => {
           this.$message({

src/style/main.css

   padding: 0 20px !important;
 }
 
+.avatar-uploader{
+  display: inline-block;
+}