收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue elementui 基础表格布局，基础表格+条件+搜索框布局,类型处理，父子组件方法调用

5051人阅读 2020/6/6 10:20 总访问：5182638 评论：0 收藏：0 手机
分类: 前端

基础表格+条件+搜索框布局

效果如下：

代码如下：

  1. <template>
  2.     <div class="app-container">
  3.         <el-card class="box-card">
  4.             <div slot="header" class="clearfix">
  5.                 <div class="toolbar">
  6.                     <div class="item-left">
  7.                         <el-button type="primary" icon="el-icon-plus">添加</el-button>
  8.                     </div>
  9.                     <div class="item-right">
  10.                         <div class="search">
  11.                             <el-select v-model="pageParam.txid" placeholder="请选择课程体系" style="width: 140px;">
  12.                                 <el-option label="所有课程体系" value="" />
  13.                                 <el-option v-for="op in tixilist" :key="op.id" :label="op.name" :value="op.id" />
  14.                             </el-select>
  15.                             <el-select v-model="pageParam.status" placeholder="请选择状态" style="width: 120px;">
  16.                                 <el-option label="所有状态" :value="-1" />
  17.                                 <el-option label="禁用" :value="0" />
  18.                                 <el-option label="启用" :value="1" />
  19.                             </el-select>
  20.                             <el-select v-model="pageParam.type" placeholder="请选择类型" style="width: 120px;display: none;">
  21.                                 <el-option label="所有类型" :value="-1" />
  22.                                 <el-option label="评估" :value="0" />
  23.                                 <el-option label="实验" :value="1" />
  24.                             </el-select>
  25.                             <el-input v-model="pageParam.key" placeholder="请输入内容" class="input-with-select"
  26.                                 style="width: 240px;" />
  27.                             <el-button slot="append" icon="el-icon-search" type="primary" @click="loadpagelist()">搜索
  28.                             </el-button>
  29.                         </div>
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.             <div>
  34.                 <el-table :data="courseList" stripe style="width: 100%" empty-text="暂无数据">
  35.                     <el-table-column type="index" label="No" width="50" />
  36.                     <el-table-column prop="courseName" label="课程名称" />
  37.                     <el-table-column prop="tixi.name" label="课程体系" width="150" />
  38.                     <el-table-column prop="courseType" label="课程类型" width="150">
  39.                         <template slot-scope="scope">
  40.                             <div>
  41.                                 <span v-if="scope.row.courseType == 0">评估</span>
  42.                                 <span v-else-if="scope.row.courseType == 1">实验</span>
  43.                             </div>
  44.                         </template>
  45.                     </el-table-column>
  46.                     <el-table-column prop="isEnable" label="状态" width="80">
  47.                         <template slot-scope="scope">
  48.                             <div>
  49.                                 <span v-if="scope.row.isEnable">启用</span>
  50.                                 <span v-else style="color: lightpink;">禁用</span>
  51.                             </div>
  52.                         </template>
  53.                     </el-table-column>
  54.                     <el-table-column prop="addManName" label="创建人" width="80" />
  55.                     <el-table-column prop="addTime" label="创建时间" width="120"
  56.                         :formatter="(r, c, v) => { return $utils.colDateFormat(v, 'YYYY-MM-DD') }" />
  57.                     <el-table-column prop="courseVersion" label="版本号" width="120" />
  58.                     <el-table-column label="操作" width="180" fixed="right">
  59.                         <div slot-scope="scope">
  60.                             <el-button size="mini" type="text" @click="editcourse(scope.row)">编辑</el-button>
  61.                             <el-button size="mini" type="text" @click="editchapter(scope.row)">章节管理</el-button>
  62.                             <el-button v-if="type === 1" size="mini" type="text" @click="jumpLab(scope.row)">实验手册
  63.                             </el-button>
  64.                             <el-button v-if="type === 0" size="mini" type="text" @click="jumpknow(scope.row)">知识点
  65.                             </el-button>
  66.                         </div>
  67.                     </el-table-column>
  68.                 </el-table>
  69.                 <el-pagination background layout="prev, pager, next" :total="pageParam.dataCount"
  70.                     :page-size="pageParam.pageSize" :current-page="pageParam.pageIndex"
  71.                     @current-change="currentChange" />
  72.             </div>
  73.         </el-card>
  74.     </div>
  75. </template>
  77. <script>
  78. import Tinymce from '@/components/Tinymce'
  79. export default {
  80.     name: 'Mycourseindex',
  81.     components: {
  82.         Tinymce
  83.     },
  84.     props: {
  85.         type: { // 类型  实验、评估
  86.             type: [Number],
  87.             required: false,
  88.             default: 0
  89.         }
  90.     },
  91.     data() {
  92.         return {
  93.             editorToolBar: [
  94.                 'bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample'
  95.             ],
  96.             courseList: [],
  97.             tixilist: [],
  98.             pageParam: {
  99.                 pageIndex: 1,
  100.                 pageSize: 15,
  101.                 dataCount: 0,
  102.                 key: '',
  103.                 type: -1,
  104.                 status: -1,
  105.                 txid: ''
  106.             },
  107.         }
  108.     },
  109.     created() {
  110.     },
  111.     mounted() { },
  112.     methods: {
  113.         currentChange(curentIndex) {
  114.             // const self = this
  115.             // self.pageParam.pageIndex = curentIndex
  116.             // self.loadpagelist()
  117.         },
  118.     }
  119. }
  120. </script>
  122. <style lang="scss">
  123. .myuploader {
  124.     .el-upload {
  125.         border: solid 1px #eee;
  126.         border-radius: 6px;
  127.         cursor: pointer;
  128.         position: relative;
  129.         overflow: hidden;
  130.     }
  132.     .el-upload:hover {
  133.         border-color: #409EFF;
  134.     }
  136.     .avatar-uploader-icon {
  137.         font-size: 28px;
  138.         color: #8c939d;
  139.         width: 80px;
  140.         height: 80;
  141.         line-height: 80px;
  142.         text-align: center;
  143.     }
  145.     .avatar {
  146.         width: 80px;
  147.         height: 80px;
  148.         display: block;
  149.     }
  150. }
  151. </style>

有逻辑代码，接口调用，弹窗查看详情，图片上传，图片预览，完善一些的

页面：

  1. <!-- 教师反馈 -->
  2. <template>
  3.   <div class="app-container">
  4.     <el-card class="box-card">
  5.       <div slot="header" class="clearfix">
  6.         <div class="toolbar">
  7.           <div class="item-left">
  8.             <el-button type="primary" size="small" icon="el-icon-plus" @click="openFeedbackDialog()">反馈
  9.             </el-button>
  10.           </div>
  11.           <div class="item-right">
  12.             <div class="search">
  13.               <!-- <el-select v-model="pageParam.txid" placeholder="请选择课程体系" style="width: 140px;">
  14.                                 <el-option label="所有课程体系" value="" />
  15.                                 <el-option v-for="op in tixilist" :key="op.id" :label="op.name" :value="op.id" />
  16.                             </el-select>
  17.                             <el-select v-model="pageParam.status" placeholder="请选择状态" style="width: 120px;">
  18.                                 <el-option label="所有状态" :value="-1" />
  19.                                 <el-option label="禁用" :value="0" />
  20.                                 <el-option label="启用" :value="1" />
  21.                             </el-select> -->
  22.               <!-- <el-select v-model="pageParam.type" placeholder="请选择类型" style="width: 120px;display: none;">
  23.                                 <el-option label="所有类型" :value="-1" />
  24.                                 <el-option label="评估" :value="0" />
  25.                                 <el-option label="实验" :value="1" />
  26.                             </el-select> -->
  27.               <!-- <el-select v-model="queryParms.feedbackType" size="small" class="query-condition" filterable
  28.                                 @change="search">
  29.                                 <el-option label="反馈类型" value="" />
  30.                                 <el-option v-for="item in feedbackTypes" :key="item.feedbackType"
  31.                                     :label="item.feedbackName" :value="item.feedbackType" />
  32.                             </el-select> -->
  33.               <el-select
  34.                 v-model="queryParms.dealType"
  35.                 size="small"
  36.                 class="query-condition"
  37.                 filterable
  38.                 @change="getData()"
  39.               >
  40.                 <el-option label="处理类型" value="" />
  41.                 <el-option
  42.                   v-for="item in dealTypes"
  43.                   :key="item.dealType"
  44.                   :label="item.dealTypeName"
  45.                   :value="item.dealType"
  46.                 />
  47.               </el-select>
  48.               <el-select
  49.                 v-model="queryParms.feedbackType"
  50.                 size="small"
  51.                 class="query-condition"
  52.                 filterable
  53.                 @change="getData()"
  54.               >
  55.                 <el-option label="反馈类型" value="" />
  56.                 <el-option
  57.                   v-for="item in feedbackTypes"
  58.                   :key="item.feedbackType"
  59.                   :label="item.feedbackName"
  60.                   :value="item.feedbackType"
  61.                 />
  62.               </el-select>
  63.               <el-input
  64.                 v-model="queryParms.QueryName"
  65.                 size="small"
  66.                 placeholder="请输入内容"
  67.                 class="input-with-select"
  68.                 style="width: 191px;"
  69.               />
  70.               <el-button
  71.                 slot="append"
  72.                 size="small"
  73.                 icon="el-icon-search"
  74.                 type="primary"
  75.                 @click="getData()"
  76.               >搜索
  77.               </el-button>
  78.             </div>
  79.           </div>
  80.         </div>
  81.       </div>
  82.       <div>
  83.         <el-table v-loading="loading" :data="dataList">
  84.           <el-table-column label="NO" type="index" width="50" fixed="left" />
  85.           <!-- <el-table-column label="姓名" prop="userShowName" width="80" />
  86.                     <el-table-column label="账号" prop="userName" /> -->
  87.           <el-table-column label="描述" prop="feedbackDescribe" />
  88.           <el-table-column prop="feedbackType" label="类型" width="100">
  89.             <template slot-scope="scope">
  90.               <el-tag v-if="scope.row.feedbackType == 1" type="danger">系统问题</el-tag>
  91.               <el-tag v-if="scope.row.feedbackType == 2" type="warning">内容问题</el-tag>
  92.               <el-tag v-if="scope.row.feedbackType == 3">我要吐槽</el-tag>
  93.             </template>
  94.           </el-table-column>
  95.           <el-table-column prop="dealType" label="处理" width="100">
  96.             <template slot-scope="scope">
  97.               <el-tag v-if="scope.row.dealType == 0" type="warning">未处理</el-tag>
  98.               <el-tag v-if="scope.row.dealType == 1" type="success">已处理</el-tag>
  99.               <el-tag v-if="scope.row.dealType == 2" type="info">已驳回</el-tag>
  100.               <el-tag v-if="scope.row.dealType == 3" type="warning">不予处理</el-tag>
  101.             </template>
  102.           </el-table-column>
  103.           <!-- <el-table-column prop="dataFromType" label="来源" width="80">
  104.                         <template slot-scope="scope">
  105.                             <el-tag v-if="scope.row.dataFromType == 0" type="danger">未知</el-tag>
  106.                             <el-tag v-if="scope.row.dataFromType == 1" type="warning">实验</el-tag>
  107.                             <el-tag v-if="scope.row.dataFromType == 2" type="success">评估</el-tag>
  108.                         </template>
  109.                     </el-table-column> -->
  110.           <!-- <el-table-column label="地址" prop="feedbackPath" width="100" show-overflow-tooltip /> -->
  111.           <el-table-column label="反馈时间" width="115">
  112.             <template slot-scope="{ row }">
  113.               {{ $utils.colDateFormat(row.createTime, "YYYY-MM-DD") }}
  114.             </template>
  115.           </el-table-column>
  116.           <el-table-column label="操作" width="70" :align="left" fixed="right">
  117.             <template slot-scope="{ row }" style="text-align:center">
  118.               <el-button size="mini" style="margin-left: -10px;" @click="showDetais(row)">详情</el-button>
  119.               <!-- <el-link @click="showFeedbackDialog(row.id)">处理</el-link> -->
  120.               <!-- <el-link style="margin-left:10px" @click="showDetais(row)">详情</el-link> -->
  121.             </template>
  122.           </el-table-column>
  123.         </el-table>
  125.         <el-pagination
  126.           background
  127.           layout="total,prev, pager, next"
  128.           :total="queryParms.dataCount"
  129.           :page-size="queryParms.PageSize"
  130.           :current-page="queryParms.PageIndex"
  131.           @current-change="currentChange"
  132.         />
  133.       </div>
  134.     </el-card>
  136.     <el-dialog title="详情" :visible.sync="detailsDialogVisible" width="30%" :before-close="handleClose">
  137.       <div style="margin-top:9px">
  138.         <span style="font-weight:800"> 反馈内容：</span>
  139.         <span>{{ details.feedbackDescribe }}</span>
  140.       </div>
  141.       <div style="margin-top:9px">
  142.         <span style="font-weight:800"> 处理状态：</span>
  143.         <el-tag v-if="details.dealType == 0" type="warning">未处理</el-tag>
  144.         <el-tag v-if="details.dealType == 1" type="success">已处理</el-tag>
  145.         <el-tag v-if="details.dealType == 2" type="info">已驳回</el-tag>
  146.       </div>
  147.       <div v-if="details.dealingOpinion">
  148.         <div style="margin-top:9px">
  149.           <span style="font-weight:800"> 处理意见：</span>
  150.           <span v-if="details.dealingOpinion">{{ details.dealingOpinion }}</span>
  151.         </div>
  152.         <div style="margin-top:9px">
  153.           <span style="font-weight:800"> 处理人员：</span>
  154.           <span>{{ details.dealUserName }}</span>
  155.         </div>
  156.         <div style="margin-top:9px">
  157.           <span style="font-weight:800"> 处理时间：</span>
  158.           <span>{{ details.dealTime }}</span>
  159.         </div>
  160.       </div>
  161.       <div style="margin-top:9px;display:flex">
  162.         <div style="font-weight:800"> 问题截图：</div>
  163.         <div style="display:flex">
  164.           <div
  165.             v-for="(item, i) in details.feedbackImgs"
  166.             :key="i + 'img'"
  167.             style="margin-right:10px"
  168.             class="img-waper"
  169.             @click="onPreviewImg(i)"
  170.           >
  171.             <!-- 用id去显示图片，其实就是图片处理后的名称 -->
  172.             <img
  173.               style="cursor:pointer"
  174.               :src="'/oss/api/ImageViewer/' + item.id + '.jpg?percent=0.6&quality=80&od=true'"
  175.               width="70px"
  176.               height="70px"
  177.             >
  178.           </div>
  179.         </div>
  180.       </div>
  181.       <span slot="footer" class="dialog-footer">
  182.         <el-button @click="detailsDialogVisible = false">取 消</el-button>
  183.         <el-button type="primary" @click="detailsDialogVisible = false">确 定</el-button>
  184.       </span>
  185.     </el-dialog>
  187.     <!-- 封装的弹窗组件 -->
  188.     <FeedbackDialog ref="feedbackDialog" />
  190.     <el-image-viewer
  191.       v-if="showViewer"
  192.       style="z-index:99999999"
  193.       :on-close="closeViewer"
  194.       :initial-index="initialIndex"
  195.       :url-list="details.feedbackImgs.map(a => a.fileUrl)"
  196.     />
  197.   </div>
  198. </template>
  200. <script>
  201. import FeedbackDialog from './components/feedbackDialog.vue'
  202. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  203. export default {
  204.   name: 'Mycourseindex',
  205.   components: {
  206.     FeedbackDialog,
  207.     ElImageViewer
  208.   },
  209.   props: {
  210.     type: { // 类型  实验、评估
  211.       type: [Number],
  212.       required: false,
  213.       default: 0
  214.     }
  215.   },
  216.   data() {
  217.     return {
  218.       editorToolBar: [
  219.         'bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample'
  220.       ],
  221.       loading: false,
  222.       detailsDialogVisible: false,
  223.       dataList: [], // 反馈列表
  224.       tixilist: [],
  225.       dealTypes: [
  226.         { dealType: '0', dealTypeName: '未处理' },
  227.         { dealType: '1', dealTypeName: '已处理' },
  228.         { dealType: '2', dealTypeName: '已驳回' }
  229.       ],
  230.       feedbackTypes: [
  231.         { feedbackType: '1', feedbackName: '系统问题' },
  232.         { feedbackType: '2', feedbackName: '内容问题' },
  233.         { feedbackType: '3', feedbackName: '我要吐槽' }
  234.       ],
  235.       queryParms: {
  236.         pageIndex: 1,
  237.         pageSize: 15,
  238.         dataCount: 0,
  239.         QueryName: '',
  240.         key: '',
  241.         type: -1,
  242.         dealType: '',
  243.         feedbackType: '',
  244.         status: -1,
  245.         txid: ''
  246.       },
  247.       showViewer: false,
  248.       details: {
  249.         feedbackDescribe: '',
  250.         dealingOpinion: '',
  251.         dealTime: '',
  252.         dealUserName: '',
  253.         dealType: '',
  254.         feedbackImgs: []
  255.       }
  256.     }
  257.   },
  258.   created() {
  259.   },
  260.   mounted() {
  261.     this.getData()
  262.   },
  263.   methods: {
  264.     getData() {
  265.       this.loading = true
  266.       this.$http
  267.         .get(
  268.           '/education/api/TeacherFeedback/GetFeedbackListByUser',
  269.           this.queryParms
  270.         )
  271.         .then((res) => {
  272.           console.log(res)
  273.           this.dataList = res.data.data
  274.           this.loading = false
  275.           this.queryParms.dataCount = res.data.dataCount
  276.         })
  277.     },
  278.     // 打开图片预览
  279.     onPreviewImg(i) {
  280.       // 设置预览图片的索引
  281.       this.initialIndex = i
  282.       this.showViewer = true
  283.     },
  284.     // 关闭图片预览
  285.     closeViewer() {
  286.       this.showViewer = false
  287.     },
  288.     currentChange(curentIndex) {
  289.       // const self = this
  290.       // self.pageParam.pageIndex = curentIndex
  291.       // self.loadpagelist()
  292.     },
  293.     showDetais(rowInp) {
  294.       this.details.feedbackDescribe = rowInp.feedbackDescribe
  295.       this.details.dealingOpinion = rowInp.dealingOpinion
  296.       this.details.dealUserName = rowInp.dealUserName
  297.       this.details.dealTime = rowInp.dealTime
  298.       this.details.dealType = rowInp.dealType
  299.       this.details.feedbackImgs = JSON.parse(rowInp.feedbackImgs)
  300.       this.detailsDialogVisible = true
  301.     },
  302.     openFeedbackDialog() {
  303.       // 调用子组件的方法打开弹窗
  304.       this.$refs.feedbackDialog.openFeedbackDialog(this.dataFromType)
  305.     }
  306.   }
  307. }
  308. </script>
  310. <style lang="scss">
  311. .myuploader {
  312.     .el-upload {
  313.         border: solid 1px #eee;
  314.         border-radius: 6px;
  315.         cursor: pointer;
  316.         position: relative;
  317.         overflow: hidden;
  318.     }
  320.     .el-upload:hover {
  321.         border-color: #409EFF;
  322.     }
  324.     .avatar-uploader-icon {
  325.         font-size: 28px;
  326.         color: #8c939d;
  327.         width: 80px;
  328.         height: 80;
  329.         line-height: 80px;
  330.         text-align: center;
  331.     }
  333.     .avatar {
  334.         width: 80px;
  335.         height: 80px;
  336.         display: block;
  337.     }
  338. }
  339. </style>

弹窗：

  1. <!-- 老师进行进行反馈 -->
  2. <!-- 问题反馈使用的弹窗 -->
  3. <template>
  4.   <div>
  5.     <!-- 弹窗start -->
  6.     <div class="dialogContent">
  7.       <el-dialog
  8.         :visible.sync="dialogVisible"
  9.         :show-close="false"
  10.         width="700px"
  11.         height="800px"
  12.         :before-close="handleClose"
  13.       >
  14.         <div slot="title" class="dialog-footer">
  15.           <div style="font-size:16px">
  16.             问题反馈
  17.           </div>
  18.           <div class="separateline" />
  19.         </div>
  20.         <div style="margin-top:-10px">
  21.           <div style="display:flex">
  22.             <div style="width:78px;color:#000">
  23.               问题类型:
  24.             </div>
  25.             <div>
  26.               <el-radio v-model="feedbackType" label="1">系统问题</el-radio>
  27.               <el-radio v-model="feedbackType" label="2">内容问题</el-radio>
  28.               <el-radio v-model="feedbackType" label="3">我要吐槽</el-radio>
  29.             </div>
  30.           </div>
  31.           <div style="display:flex;margin-top: 30px;">
  32.             <div style="width:78px;color:#000;">
  33.               描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:
  34.             </div>
  35.             <div style="flex-grow: 1">
  36.               <el-input
  37.                 v-model="describe"
  38.                 type="textarea"
  39.                 style="width:100%"
  40.                 :rows="7"
  41.                 placeholder="请输入内容"
  42.               />
  43.             </div>
  44.           </div>
  45.           <div style="display:flex;margin-top: 30px;">
  46.             <div style="width:78px;color:#000">
  47.               问题截图:
  48.             </div>
  49.             <div style="flex-grow: 1">
  50.               <!-- 引用图片上传的组件 -->
  51.               <UpLoadImg ref="upLoadImg" />
  52.             </div>
  53.           </div>
  54.         </div>
  55.         <span slot="footer" class="dialog-footer">
  56.           <el-button size="small" @click="dialogVisible = false">我在想想</el-button>
  57.           <el-button type="primary" size="small" @click="saveFeedback()">确定反馈</el-button>
  58.         </span>
  59.       </el-dialog>
  60.     </div>
  61.     <!-- 弹窗end -->
  62.   </div>
  64. </template>
  66. <script>
  67. import UpLoadImg from './upLoadImg.vue'
  68. export default {
  69.   // 组件名字
  70.   name: 'FeedbackDialog',
  71.   components: {
  72.     UpLoadImg
  73.   },
  74.   // 组件参数
  75.   props: {
  76.     index: {
  77.       type: Number,
  78.       default: 0
  79.     }
  80.   },
  81.   data() {
  82.     return {
  83.       feedbackType: '3',
  84.       describe: '',
  85.       dataFromType: 0,
  86.       dialogVisible: false
  87.     }
  88.   },
  89.   mounted() {
  90.     // alert("组件内部加载好了"+this.dialogVisibleParameter)
  91.     this.initPic()
  92.   },
  93.   // 组件方法
  94.   methods: {
  95.     initPic() {
  97.     },
  98.     // 模态框关闭前的事件
  99.     handleClose(done) {
  100.     },
  101.     // 打开弹窗
  102.     openFeedbackDialog(_dataFromType) {
  103.       this.dialogVisible = true
  104.       this.dataFromType = _dataFromType
  105.     },
  106.     // 清空一下反馈的数据，比如反馈成功之后清空一下，这样下次打开的时候不会让前面的数据还在
  107.     clearFeedbackData() {
  108.       this.feedbackType = '3'
  109.       this.describe = ''
  110.       // 清空上传的图片（通过调用子组件的方法实现，因为图片这块数据在子组件）
  111.       this.$refs.upLoadImg.clearImgs()
  112.     },
  113.     // 确定反馈
  114.     saveFeedback() {
  115.       const _this = this
  116.       if (!_this.describe) {
  117.         this.$alert('请输入反馈内容')
  118.         return
  119.       }
  120.       this.dialogVisible = false
  122.       const classID = this.$route.query.classid
  123.       // 从上传图片的子组件获取（调用子组件的方法获取）
  124.       const imgJson = this.$refs.upLoadImg.getImgs()
  125.       // 反馈回传的数据
  126.       const feedbackData = {
  127.         FeedbackImgs: JSON.stringify(imgJson), // 上传的图片
  128.         FeedbackType: _this.feedbackType, // 反馈类型
  129.         FeedbackDescribe: _this.describe, // 反馈的描述
  130.         ClassId: classID, // 班级id
  131.         DataFromType: _this.dataFromType, // 数据来源1:实验 2：评估
  132.         FeedbackPath: window.location.href // 反馈的地址。就是学生反馈时所在的页面
  133.       }
  134.       console.log(feedbackData)
  136.       this.$http.post('/education/api/TeacherFeedback/SaveFeedback', feedbackData).then(res => {
  137.         this.$alert('反馈成功')
  138.         _this.clearFeedbackData()
  139.         // 调用父组件的刷新方法
  140.         _this.$parent.getData()
  141.         console.log(res)
  142.       }).catch(e => {
  144.       }
  145.       )
  146.     }
  147.   }
  148. }
  149. </script>
  150. <style scoped="scoped" lang="scss">
  151. // 自定义的一根简单分割线
  152. .separateline {
  153.     height: 1px;
  154.     background: #eee;
  155.     margin-left: -40px;
  156.     margin-right: -40px;
  157.     margin-top: 9px;
  158. }
  160. // 问题截图，传递图片的样式
  161. .form-content.panle {
  162.     // padding: 20px;
  163.     padding-bottom: 10px;
  164.     // background-color: #f8f8f8;
  166.     .img-boxs {
  167.         display: flex;
  168.         /* margin-right: 46px; */
  169.         flex-wrap: wrap;
  171.         .img-waper {
  172.             margin-right: 10px;
  173.             margin-bottom: 10px;
  174.             position: relative;
  176.             .remove-icon:hover {
  177.                 cursor: pointer;
  179.                 img {
  180.                     opacity: 0.6;
  181.                 }
  182.             }
  184.             .remove-icon {
  185.                 position: absolute;
  186.                 width: 14px;
  187.                 height: 14px;
  188.                 top: -8px;
  189.                 right: -5px;
  191.                 img {
  192.                     width: 100%;
  193.                 }
  194.             }
  195.         }
  197.     }
  199.     .add-btn:hover {
  200.         cursor: pointer;
  201.         opacity: 0.6;
  202.     }
  204.     .add-btn {
  205.         width: 70px;
  206.         height: 70px;
  207.         border: solid 1px #DDDDDD;
  208.         display: flex;
  209.         align-items: center;
  210.         flex-wrap: wrap;
  211.         justify-content: space-around;
  213.         .icon-waper {
  214.             width: 18px;
  215.             height: 21px;
  216.             position: relative;
  218.             .icon-x {
  219.                 width: 19px;
  220.                 height: 5px;
  221.                 background-color: #DDDDDD;
  222.                 position: absolute;
  223.                 top: 0;
  224.                 bottom: 0;
  225.                 margin: auto;
  226.             }
  228.             .icon-y {
  229.                 height: 21px;
  230.                 width: 5px;
  231.                 background-color: #DDDDDD;
  232.                 position: absolute;
  233.                 left: 0;
  234.                 right: 0;
  235.                 margin: auto;
  236.             }
  237.         }
  238.     }
  239. }
  240. </style>
  242. <!-- 修改elementui里边对话框的默认样式
  243.    需要注意两点：
  244.    1：样式声明的时候不要加scoped，不然样式只在当前组件起作用，无法覆盖样式内容的样式
  245.    2：要修改默认弹窗里边的样式，加一个前缀，就可以做到只修改当前这个组件的了，不然可能会影响到其他地方的样式
  246. -->
  247. <style lang="scss">
  248. /* .dialogContent .el-dialog {
  249.     background-color: #F6F8FC;
  250. }
  252. .dialogContent .el-dialog__header {
  253.     padding: 20px 40px 10px 40px
  254. }
  256. .dialogContent .el-dialog__body {
  257.     padding: 30px 40px;
  258.     color: #606266;
  259.     font-size: 14px;
  260.     word-break: break-all;
  261. } */
  263. // 修改el-dialog里边的默认样式
  264. .dialogContent {
  266.     .el-dialog {
  267.         background-color: #F6F8FC;
  268.     }
  270.     .el-dialog__header {
  271.         padding: 20px 40px 10px 40px;
  272.         background-color: #f6f8fc !important;
  273.     }
  275.     .el-dialog__body {
  276.         padding: 30px 40px;
  277.         color: #606266;
  278.         font-size: 14px;
  279.         word-break: break-all;
  280.     }
  282.     .el-dialog__footer {
  283.         padding: 0px 40px 30px 40px
  284.     }
  286.     // 修改默认按钮的padding也就是跳转按钮的宽度
  287.     .el-button--small,
  288.     .el-button--small.is-round {
  289.         padding: 9px 16px;
  290.     }
  292.     // 修改默认按钮的圆角为直角
  293.     .el-button--mini,
  294.     .el-button--small {
  295.         border-radius: 0px;
  296.     }
  298. }
  299. </style>

图片上传的组件

  1. <!-- 问题反馈使用的弹窗 -->
  2. <template>
  3.   <div>
  4.     <!-- 图片上传start -->
  5.     <div class="form-content panle">
  6.       <div class="img-boxs">
  7.         <div v-for="(item,i) in taskResoult.imgJson" :key="i+'img'" class="img-waper" @click="onPreviewImg(i)">
  8.           <img
  9.             :src="'/oss/api/ImageViewer/'+item.id+'.jpg?percent=0.6&quality=80&od=true'"
  10.             width="79px"
  11.             height="79px"
  12.           >
  13.           <div class="remove-icon" @click="rmImgs(i)">
  14.             <img src="/asserts/img/error.png">
  15.           </div>
  16.         </div>
  17.         <div v-if="taskResoult.imgJson.length<9" class="img-waper">
  18.           <div class="add-btn" @click="addImgClick">
  19.             <input
  20.               ref="inputImgFile"
  21.               type="file"
  22.               style="display: none;"
  23.               accept="image/*"
  24.               @change="uploadimg"
  25.             >
  26.             <div class="icon-waper">
  27.               <div class="icon-x" />
  28.               <div class="icon-y" />
  29.             </div>
  30.           </div>
  31.         </div>
  32.       </div>
  33.     </div>
  34.     <!-- 图片上传end -->
  36.     <!-- 图片预览start -->
  37.     <el-image-viewer
  38.       v-if="showViewer"
  39.       :z-index="20000"
  40.       :initial-index="initialIndex"
  41.       :append-to-body="true"
  42.       :on-close="closeViewer"
  43.       :mask-closable="false"
  44.       :url-list="taskResoult.imgJson.map(a=>a.fileUrl)"
  45.     />
  46.     <!-- 图片预览end -->
  47.   </div>
  49. </template>
  51. <script>
  52. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  53. export default {
  54.   // 组件名字
  55.   name: 'UpLoadImg',
  56.   components: {
  57.     ElImageViewer
  58.   },
  59.   // 组件参数
  60.   props: {
  61.     index: {
  62.       type: Number,
  63.       default: 0
  64.     }
  65.   },
  66.   data() {
  67.     return {
  68.       showViewer: false,
  69.       initialIndex: 0,
  70.       taskResoult: {
  71.         'uploadFileID': '',
  72.         stuImgs: '',
  73.         imgJson: [],
  74.         'uploadFileInfo': '',
  75.         uploadFileInfoJson: {},
  76.         'remarks': null
  77.       }
  78.     }
  79.   },
  80.   mounted() {
  81.     this.initPic()
  82.   },
  83.   // 组件方法
  84.   methods: {
  85.     initPic() {
  86.     },
  87.     // 点击添加图片，直接触发文件选择框的事件即可
  88.     addImgClick() {
  89.       this.$refs.inputImgFile.click()
  90.     },
  91.     // 打开图片预览
  92.     onPreviewImg(i) {
  93.       // 设置预览图片的索引
  94.       this.initialIndex = i
  95.       this.showViewer = true
  96.     },
  97.     // 获取当前上传的图片
  98.     getImgs() {
  99.       return this.taskResoult.imgJson
  100.     },
  101.     // 清空当前选择的图片
  102.     clearImgs() {
  103.       this.taskResoult.imgJson = []
  104.       this.$forceUpdate()
  105.     },
  106.     // 关闭图片预览
  107.     closeViewer() {
  108.       this.showViewer = false
  109.     },
  110.     // 点击叉叉删除图片
  111.     rmImgs(i) {
  112.       this.taskResoult.imgJson.splice(i, 1)
  113.       // console.log(self.taskResoult)
  114.       this.$forceUpdate()
  115.     },
  116.     // 上传图片逻辑。文件选择框的change事件触发
  117.     uploadimg(e) {
  118.       // 日精进上传图片
  119.       const imgFileExtensionArry = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
  120.       const file = e.target.files[0]
  121.       const fileExt = file.name.substr(file.name.lastIndexOf('.') + 1)
  122.       if (imgFileExtensionArry.indexOf(fileExt.toLowerCase()) === -1) {
  123.         this.$message.warning('仅允许提交图片文件!')
  124.         return
  125.       }
  126.       const formData = new FormData()
  127.       formData.append('bucketName', 'labroom')
  128.       formData.append('filePath', 'feedback')
  129.       formData.append('FileType', 1)
  130.       formData.append('file', file)
  131.       if (this.taskResoult.stuImgs && this.taskResoult.imgJson.length === 9) {
  132.         this.$message.error('不允许超过9张图片')
  133.         return
  134.       }
  136.       const self = this
  137.       this.$http.post('/oss/api/SmartFiles/UpLoadFormFile', formData).then(res => {
  138.         const imgInfo = {
  139.           id: res.data.id,
  140.           fileName: res.data.title,
  141.           fileUrl: '/oss/api/ImageViewer/' + res.data.id + '.jpg'
  142.         }
  143.         self.taskResoult.imgJson.push(imgInfo)
  144.         console.log(self.taskResoult)
  145.         self.$forceUpdate()
  146.       })
  147.     }
  148.   }
  149. }
  150. </script>
  151.   <style scoped="scoped" lang="scss">
  152.   // 问题截图，传递图片的样式
  153.   .form-content.panle {
  154.       // padding: 20px;
  155.       padding-bottom: 10px;
  156.       // background-color: #f8f8f8;
  158.       .img-boxs {
  159.           display: flex;
  160.           /* margin-right: 46px; */
  161.           flex-wrap: wrap;
  163.           .img-waper {
  164.               margin-right: 10px;
  165.               margin-bottom: 10px;
  166.               position: relative;
  168.               .remove-icon:hover {
  169.                   cursor: pointer;
  171.                   img {
  172.                       opacity: 0.6;
  173.                   }
  174.               }
  176.               .remove-icon {
  177.                   position: absolute;
  178.                   width: 14px;
  179.                   height: 14px;
  180.                   top: -8px;
  181.                   right: -5px;
  183.                   img {
  184.                       width: 100%;
  185.                   }
  186.               }
  187.           }
  189.       }
  191.       .add-btn:hover {
  192.           cursor: pointer;
  193.           opacity: 0.6;
  194.       }
  196.       .add-btn {
  197.           width: 79px;
  198.           height: 79px;
  199.           border: solid 1px #DDDDDD;
  200.           display: flex;
  201.           align-items: center;
  202.           flex-wrap: wrap;
  203.           justify-content: space-around;
  205.           .icon-waper {
  206.               width: 18px;
  207.               height: 21px;
  208.               position: relative;
  210.               .icon-x {
  211.                   width: 19px;
  212.                   height: 5px;
  213.                   background-color: #DDDDDD;
  214.                   position: absolute;
  215.                   top: 0;
  216.                   bottom: 0;
  217.                   margin: auto;
  218.               }
  220.               .icon-y {
  221.                   height: 21px;
  222.                   width: 5px;
  223.                   background-color: #DDDDDD;
  224.                   position: absolute;
  225.                   left: 0;
  226.                   right: 0;
  227.                   margin: auto;
  228.               }
  229.           }
  230.       }
  231.   }
  232. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue elementui常用表单验证
&lt;script&gt; exportdefault{ name:&quot;form&quot;, data(){ //ip地址校验 varIPValidator=(rule,value,callbac...

vue elementui隐藏表格列。vue element-ui表格添加自增序号列
vue elementui隐藏表格列v-if就搞定了，如果不是动态的显示与隐藏直接设置成false就行 &lt;el-table-column label=&quot;...

vue elementui，vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传
比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单，el-upload绑定一个data即可...

vue elementui 图片预览。el-image-viewer图片查看器。修改图片预览的自带样式。点击哪一个就查看哪一个图片
先引入图片预览的组件 import ElImageViewer from &#39;element-ui/packages/image/src/image-viewer&#39; export defa...

vue elementui 常用表格，条件查询，类型解析，弹窗显示详情，图片显示，图片预览
[TOC]第一版 页面&lt;template&gt; &lt;div class=&quot;app-container&quot;&gt; &lt;el-card&gt; &lt;!-...

vue elementui 弹窗el-dialog，自定义弹窗样式，单选按钮el-radio联动
效果如下： 代码如下： &lt;!-- 处理问题反馈使用的弹窗 --&gt; &lt;template&gt; &lt;div&gt; &lt;!-- 弹窗sta...

vue elementui分页条使用与.net后台sqlsugar等分页方法使用。常用分页模板
分页条&lt;div style=&quot;margin-top: 20px;margin-bottom: 20px;text-align: center;&quot;&gt; &lt;el-pagination ...

vue elementui table去掉滚动条
当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动。现在需求是右侧滚...

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框，据输入，动态加载数据 jquery-editable-select
用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页，.net core分部页
.net分部页的三种方式第一种：@Html.Partial(&quot;_分部页&quot;)第二种：@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式，iis设置mime类型，iis配置支持的类型
webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现，无视文件大小上传，以及datatables基本用法
首先明白js是客户带执行代码，c#是服务器上执行代码。本地文件需要用到js处理，服务器端接受c#代码处理1.HTML页面，文件信...

如何使用图标像使用文字一样，使用文本图标的方法
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标；注意：每个类型的图标会大小不...