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

vue elementui 常用表格，条件查询，类型解析，弹窗显示详情，图片显示，图片预览

5657人阅读 2020/6/8 10:18 总访问：5182795 评论：0 收藏：0 手机
分类: 前端

第一版

页面

  1. <template>
  2.   <div class="app-container">
  3.     <el-card>
  4.       <!--查询条件-->
  5.       <div class="clearfix">
  6.         <el-radio-group v-model="queryParms.dealType" size="small" @change="search">
  7.           <el-radio-button label="">所有反馈</el-radio-button>
  8.           <el-radio-button label="0">未经处理</el-radio-button>
  9.           <el-radio-button label="1">同意处理</el-radio-button>
  10.           <el-radio-button label="2">驳回处理</el-radio-button>
  11.           <el-radio-button label="3">不予处理</el-radio-button>
  12.         </el-radio-group>
  13.         <div style="flex: 1" />
  14.         <el-select @change="search" v-model="queryParms.feedbackType" class="query-condition" size="small" filterable>
  15.           <el-option label="反馈类型" value="" />
  16.           <el-option v-for="item in feedbackTypes" :key="item.feedbackType" :label="item.feedbackName"
  17.             :value="item.feedbackType" />
  18.         </el-select>
  19.         <el-input v-model="queryParms.queryName" size="small" class="query-condition" placeholder="姓名,校区,班级" />
  20.         <el-button type="primary" size="small" @click="search">查询</el-button>
  21.       </div>
  23.       <el-table v-loading="loading" :data="dataList">
  24.         <el-table-column label="NO" type="index" width="50" fixed="left" />
  25.         <el-table-column label="姓名" prop="userShowName"  />
  26.         <el-table-column label="校区" prop="schoolName" />
  27.         <el-table-column label="班级" prop="className" />
  28.         <el-table-column label="账号" prop="userName" />
  29.         <!-- <el-table-column label="类型" prop="feedbackType" /> -->
  30.         <el-table-column label="描述" prop="feedbackDescribe" />
  31.         <el-table-column prop="feedbackType" label="类型">
  32.           <template slot-scope="scope">
  33.             <el-tag v-if="scope.row.feedbackType == 1" type="danger">系统问题</el-tag>
  34.             <el-tag v-if="scope.row.feedbackType == 2" type="warning">内容问题</el-tag>
  35.             <el-tag v-if="scope.row.feedbackType == 3">我要吐槽</el-tag>
  36.           </template>
  37.         </el-table-column>
  38.         <el-table-column prop="dealType" label="处理">
  39.           <template slot-scope="scope">
  40.             <el-tag v-if="scope.row.dealType == 0" type="danger">未经处理</el-tag>
  41.             <el-tag v-if="scope.row.dealType == 1" type="success">同意处理</el-tag>
  42.             <el-tag v-if="scope.row.dealType == 2" type="info">驳回处理</el-tag>
  43.             <el-tag v-if="scope.row.dealType == 3" type="warning">不予处理</el-tag>
  44.           </template>
  45.         </el-table-column>
  46.         <!-- <el-table-column label="地址" prop="feedbackPath" width="100" show-overflow-tooltip /> -->
  47.         <el-table-column label="反馈时间" width="95">
  48.           <template slot-scope="{ row }">
  49.             {{ $utils.colDateFormat(row.createTime, "YYYY-MM-DD") }}
  50.           </template>
  51.         </el-table-column>
  53.         <el-table-column label="操作" width="100" fixed="right">
  54.           <template slot-scope="{ row }">
  55.             <el-link  @click="showFeedbackDialog(row.id)">处理</el-link>
  56.             <el-link  style="margin-left:10px" @click="showDetais(row)">详情</el-link>
  57.           </template>
  58.         </el-table-column>
  59.       </el-table>
  61.       <el-pagination background layout="total,prev, pager, next" :total="dataCount" :page-size="queryParms.PageSize"
  62.         :current-page="queryParms.PageIndex" @current-change="currentChange" />
  63.     </el-card>
  65.     <el-dialog title="详情" :visible.sync="detailsDialogVisible" width="30%" :before-close="handleClose">
  66.       <div>
  67.         地址：
  68.         <span>{{ details.urlDetails }}</span>
  69.       </div>
  70.       <div>
  71.         内容：
  72.         <span>{{ details.feedbackDescribe }}</span>
  73.       </div>
  74.       <span slot="footer" class="dialog-footer">
  75.         <el-button @click="detailsDialogVisible = false">取 消</el-button>
  76.         <el-button type="primary" @click="detailsDialogVisible = false">确 定</el-button>
  77.       </span>
  78.     </el-dialog>
  80.     <DealFeedbackDialog ref="dealFeedbackDialog" />
  82.   </div>
  83. </template>
  85. <script>
  86. import DealFeedbackDialog from './components/dealFeedbackDialog.vue'
  87. export default {
  88.   name: 'GuidanceTeacher',
  89.   components: {
  90.     DealFeedbackDialog
  91.   },
  92.   data: () => {
  93.     return {
  94.       feedbackTypes: [
  95.         { feedbackType: '1', feedbackName: '系统问题' },
  96.         { feedbackType: '2', feedbackName: '内容问题' },
  97.         { feedbackType: '3', feedbackName: '我要吐槽' }
  98.       ],
  99.       detailsDialogVisible: false,
  100.       details:{
  101.         urlDetails: "",
  102.         feedbackDescribe:""
  103.       },
  104.       // selectSchoolID: "",
  105.       queryParms: {
  106.         key: '',
  107.         status: '0',
  108.         schoolID: '',
  109.         courseId: '',
  110.         dealType:'',
  111.         queryName: "",
  112.         feedbackType: "",
  113.         PageIndex: 1,
  114.         PageSize: 20
  115.       },
  116.       dataCount: 0,
  117.       loading: true,
  118.       dataList: [], // 反馈列表
  119.     }
  120.   },
  121.   mounted() {
  122.     this.getData()
  123.   },
  124.   methods: {
  125.     showFeedbackDialog(feedbackId) {
  126.       //调用子组件的方法打开弹窗
  127.       this.$refs.dealFeedbackDialog.openFeedbackDialog(feedbackId);
  128.     },
  129.     showDetais(rowInp) {
  130.       this.details.urlDetails = rowInp.feedbackPath
  131.       this.details.feedbackDescribe = rowInp.feedbackDescribe 
  132.       this.detailsDialogVisible = true
  133.     },
  134.     getData() {
  135.       this.loading = true
  136.       this.$http
  137.         .get(
  138.           '/education/api/Feedback/GetFeedbackList',
  139.           this.queryParms
  140.         )
  141.         .then((res) => {
  142.           this.dataList = res.data
  143.           this.loading = false
  144.           // this.dataCount = res.data.dataCount
  145.         })
  146.     },
  147.     currentChange(val) {
  148.       this.queryParms.PageIndex = val
  149.       this.getData()
  150.     },
  151.     search() {
  152.       this.queryParms.PageIndex = 1
  153.       this.getData()
  154.     }
  155.   }
  156. }
  157. </script>
  159. <style lang="scss" scoped>
  160. .clearfix {
  161.   display: flex;
  163.   .query-condition {
  164.     margin-left: 10px;
  165.   }
  167.   .el-input {
  168.     max-width: 200px;
  169.   }
  171.   .el-button {
  172.     margin-left: 10px;
  173.   }
  174. }
  175. </style>

弹窗那个组件：

位置：components/dealFeedbackDialog.vue

  1. <!-- 处理问题反馈使用的弹窗 -->
  2. <template>
  3.     <div>
  4.         <!-- 弹窗start -->
  5.         <div class="dialogContent">
  6.             <el-dialog :visible.sync="dialogVisible" :show-close="false" width="700px" height="800px"
  7.                 :before-close="handleClose">
  8.                 <div slot="title" class="dialog-footer">
  9.                     <div style="font-size:16px">
  10.                         问题反馈
  11.                     </div>
  12.                     <div class="separateline">
  13.                     </div>
  14.                 </div>
  15.                 <div style="margin-top:-10px">
  16.                     <div style="display:flex">
  17.                         <div style="width:78px;color:#000">
  18.                             处理类型:
  19.                         </div>
  20.                         <div>
  21.                             <el-radio v-model="feedbackType" label="1">同意处理</el-radio>
  22.                             <el-radio v-model="feedbackType" label="2">驳回处理</el-radio>
  23.                             <el-radio v-model="feedbackType" label="3">不理不睬</el-radio>
  24.                         </div>
  25.                     </div>
  26.                     <div style="display:flex;margin-top: 30px;">
  27.                         <div style="width:78px;color:#000;">
  28.                             处理意见
  29.                         </div>
  30.                         <div style="flex-grow: 1">
  31.                             <el-input type="textarea" v-model="describe" style="width:100%" :rows="7"
  32.                                 placeholder="请输入内容">
  33.                             </el-input>
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.                 <span slot="footer" class="dialog-footer">
  38.                     <el-button @click="dialogVisible = false" size="small">我在想想</el-button>
  39.                     <el-button type="primary" size="small" @click="saveFeedback()">确定反馈</el-button>
  40.                 </span>
  41.             </el-dialog>
  42.         </div>
  43.         <!-- 弹窗end -->
  45.     </div>
  47. </template>
  49. <script>
  50. export default {
  51.     // 组件名字
  52.     name: 'FeedbackDialog',
  53.     // 组件参数
  54.     props: {
  55.         index: {
  56.             type: Number,
  57.             default: 0
  58.         },
  59.     },
  60.     data() {
  61.         return {
  62.             feedbackType: "1",
  63.             feedbackId: 0,
  64.             describe: "",
  65.             dialogVisible: false
  66.         }
  67.     },
  68.     mounted() {
  69.         //alert("组件内部加载好了"+this.dialogVisibleParameter)
  70.         this.initPic()
  71.     },
  72.     // 组件方法
  73.     methods: {
  74.         initPic() {
  76.         },
  77.         //模态框关闭前的事件
  78.         handleClose(done) {
  79.         },
  80.         //打开弹窗
  81.         openFeedbackDialog(feedbackId) {
  82.             this.feedbackId = feedbackId
  83.             this.dialogVisible = true
  84.         },
  85.         //清空一下反馈的数据，比如反馈成功之后清空一下，这样下次打开的时候不会让前面的数据还在
  86.         clearFeedbackData() {
  88.         },
  89.         //确定反馈
  90.         saveFeedback() {
  91.             //this.$alert('功能开发中...')
  92.             let _this = this;
  93.             if (!this.describe) {
  94.                 this.$alert('请输入反馈意见...')
  95.                 return
  96.             }
  97.             //反馈回传的数据
  98.             let feedbackData = {
  99.                 DealType: this.feedbackType,//处理类型
  100.                 DealingOpinion: this.describe,//处理意见
  101.                 Id: this.feedbackId
  102.             }
  103.             this.$http.post('/education/api/Feedback/DealFeedback', feedbackData).then((res) => {
  104.                 //_this.$alert('处理反馈成功!...')
  105.                 _this.dialogVisible = false
  106.                 console.log(res)
  107.             })
  108.         }
  109.     }
  110. }
  111. </script>
  112. <style scoped="scoped" lang="scss">
  113. // 自定义的一根简单分割线
  114. .separateline {
  115.     height: 1px;
  116.     background: #eee;
  117.     margin-left: -40px;
  118.     margin-right: -40px;
  119.     margin-top: 9px;
  120. }
  122. // 问题截图，传递图片的样式
  123. .form-content.panle {
  124.     // padding: 20px;
  125.     padding-bottom: 10px;
  126.     // background-color: #f8f8f8;
  128.     .img-boxs {
  129.         display: flex;
  130.         /* margin-right: 46px; */
  131.         flex-wrap: wrap;
  133.         .img-waper {
  134.             margin-right: 10px;
  135.             margin-bottom: 10px;
  136.             position: relative;
  138.             .remove-icon:hover {
  139.                 cursor: pointer;
  141.                 img {
  142.                     opacity: 0.6;
  143.                 }
  144.             }
  146.             .remove-icon {
  147.                 position: absolute;
  148.                 width: 14px;
  149.                 height: 14px;
  150.                 top: -8px;
  151.                 right: -5px;
  153.                 img {
  154.                     width: 100%;
  155.                 }
  156.             }
  157.         }
  159.     }
  161.     .add-btn:hover {
  162.         cursor: pointer;
  163.         opacity: 0.6;
  164.     }
  166.     .add-btn {
  167.         width: 70px;
  168.         height: 70px;
  169.         border: solid 1px #DDDDDD;
  170.         display: flex;
  171.         align-items: center;
  172.         flex-wrap: wrap;
  173.         justify-content: space-around;
  175.         .icon-waper {
  176.             width: 18px;
  177.             height: 21px;
  178.             position: relative;
  180.             .icon-x {
  181.                 width: 19px;
  182.                 height: 5px;
  183.                 background-color: #DDDDDD;
  184.                 position: absolute;
  185.                 top: 0;
  186.                 bottom: 0;
  187.                 margin: auto;
  188.             }
  190.             .icon-y {
  191.                 height: 21px;
  192.                 width: 5px;
  193.                 background-color: #DDDDDD;
  194.                 position: absolute;
  195.                 left: 0;
  196.                 right: 0;
  197.                 margin: auto;
  198.             }
  199.         }
  200.     }
  201. }
  202. </style>
  204. <!-- 修改elementui里边对话框的默认样式
  205.    需要注意两点：
  206.    1：样式声明的时候不要加scoped，不然样式只在当前组件起作用，无法覆盖样式内容的样式
  207.    2：要修改默认弹窗里边的样式，加一个前缀，就可以做到只修改当前这个组件的了，不然可能会影响到其他地方的样式
  208. -->
  209. <style lang="scss">
  210. // 修改el-dialog里边的默认样式
  211. .dialogContent {
  213.     .el-dialog {
  214.         background-color: #F6F8FC;
  215.     }
  217.     .el-dialog__header {
  218.         padding: 20px 40px 10px 40px;
  219.         background-color: #f6f8fc !important;
  220.     }
  222.     .el-dialog__body {
  223.         padding: 30px 40px;
  224.         color: #606266;
  225.         font-size: 14px;
  226.         word-break: break-all;
  227.     }
  229.     .el-dialog__footer {
  230.         padding: 0px 40px 30px 40px
  231.     }
  233.     // 修改默认按钮的padding也就是跳转按钮的宽度
  234.     .el-button--small,
  235.     .el-button--small.is-round {
  236.         padding: 9px 16px;
  237.     }
  239.     // 修改默认按钮的圆角为直角
  240.     .el-button--mini,
  241.     .el-button--small {
  242.         border-radius: 0px;
  243.     }
  244. }
  245. </style>

第二版

改了一点加了一点点东西

页面

  1. <template>
  2.   <div class="app-container">
  3.     <el-card>
  4.       <!--查询条件-->
  5.       <div class="clearfix">
  6.         <el-radio-group v-model="queryParms.dealType" size="small" @change="search">
  7.           <el-radio-button label="0">未处理</el-radio-button>
  8.           <el-radio-button label="1">已处理</el-radio-button>
  9.           <el-radio-button label="2">已驳回</el-radio-button>
  10.           <el-radio-button label="">所有</el-radio-button>
  11.           <!-- <el-radio-button label="3">不予处理</el-radio-button> -->
  12.         </el-radio-group>
  13.         <div style="flex: 1" />
  14.         <el-select v-model="queryParms.feedbackType" class="query-condition" size="small" filterable @change="search">
  15.           <el-option label="反馈类型" value="" />
  16.           <el-option
  17.             v-for="item in feedbackTypes"
  18.             :key="item.feedbackType"
  19.             :label="item.feedbackName"
  20.             :value="item.feedbackType"
  21.           />
  22.         </el-select>
  23.         <el-input v-model="queryParms.queryName" size="small" class="query-condition" placeholder="姓名,校区,班级" />
  24.         <el-button type="primary" size="small" @click="search">查询</el-button>
  25.       </div>
  27.       <el-table v-loading="loading" :data="dataList">
  28.         <el-table-column label="NO" type="index" width="50" fixed="left" />
  29.         <el-table-column label="姓名" prop="userShowName" width="80" />
  30.         <!-- <el-table-column label="校区" prop="schoolName" />
  31.         <el-table-column label="班级" prop="className" /> -->
  32.         <el-table-column label="账号" prop="userName" />
  33.         <!-- <el-table-column label="类型" prop="feedbackType" /> -->
  34.         <el-table-column label="描述" prop="feedbackDescribe" />
  35.         <el-table-column prop="feedbackType" label="类型" width="90">
  36.           <template slot-scope="scope">
  37.             <el-tag v-if="scope.row.feedbackType == 1" type="danger">系统问题</el-tag>
  38.             <el-tag v-if="scope.row.feedbackType == 2" type="warning">内容问题</el-tag>
  39.             <el-tag v-if="scope.row.feedbackType == 3">我要吐槽</el-tag>
  40.           </template>
  41.         </el-table-column>
  42.         <el-table-column prop="dealType" label="处理" width="80">
  43.           <template slot-scope="scope">
  44.             <el-tag v-if="scope.row.dealType == 0" type="danger">未处理</el-tag>
  45.             <el-tag v-if="scope.row.dealType == 1" type="success">已处理</el-tag>
  46.             <el-tag v-if="scope.row.dealType == 2" type="info">已驳回</el-tag>
  47.             <el-tag v-if="scope.row.dealType == 3" type="warning">不予处理</el-tag>
  48.           </template>
  49.         </el-table-column>
  50.         <el-table-column prop="dataFromType" label="来源" width="80">
  51.           <template slot-scope="scope">
  52.             <el-tag v-if="scope.row.dataFromType == 0" type="danger">未知</el-tag>
  53.             <el-tag v-if="scope.row.dataFromType == 1" type="warning">实验</el-tag>
  54.             <el-tag v-if="scope.row.dataFromType == 2" type="success">评估</el-tag>
  55.           </template>
  56.         </el-table-column>
  57.         <!-- <el-table-column label="地址" prop="feedbackPath" width="100" show-overflow-tooltip /> -->
  58.         <el-table-column label="反馈时间" width="95">
  59.           <template slot-scope="{ row }">
  60.             {{ $utils.colDateFormat(row.createTime, "YYYY-MM-DD") }}
  61.           </template>
  62.         </el-table-column>
  64.         <el-table-column label="操作" width="100" fixed="right">
  65.           <template slot-scope="{ row }">
  66.             <el-link @click="showFeedbackDialog(row.id)">处理</el-link>
  67.             <el-link style="margin-left:10px" @click="showDetais(row)">详情</el-link>
  68.           </template>
  69.         </el-table-column>
  70.       </el-table>
  72.       <el-pagination
  73.         background
  74.         layout="total,prev, pager, next"
  75.         :total="dataCount"
  76.         :page-size="queryParms.PageSize"
  77.         :current-page="queryParms.PageIndex"
  78.         @current-change="currentChange"
  79.       />
  80.     </el-card>
  82.     <el-dialog title="详情" :visible.sync="detailsDialogVisible" width="30%" :before-close="handleClose">
  83.       <div>
  84.         <span style="font-weight:800">反馈地址：</span>
  85.         <span>{{ details.urlDetails }}</span>
  86.       </div>
  87.       <div style="margin-top:9px">
  88.         <span style="font-weight:800"> 反馈内容：</span>
  89.         <span>{{ details.feedbackDescribe }}</span>
  90.       </div>
  91.       <div style="margin-top:9px">
  92.         <span style="font-weight:800"> 反馈校区：</span>
  93.         <span>{{ details.schoolName }}</span>
  94.       </div>
  95.       <div style="margin-top:9px">
  96.         <span style="font-weight:800"> 反馈班级：</span>
  97.         <span>{{ details.className }}</span>
  98.       </div>
  99.       <div style="margin-top:9px">
  100.         <span style="font-weight:800"> 处理意见：</span>
  101.         <span v-if="details.dealingOpinion">{{ details.dealingOpinion }}</span>
  102.         <!-- <span v-if="!details.dealingOpinion">暂未处理</span> -->
  103.         <el-tag v-if="!details.dealingOpinion" type="danger">暂未处理</el-tag>
  104.       </div>
  105.       <div style="margin-top:9px;display:flex">
  106.         <div style="font-weight:800"> 问题截图：</div>
  107.         <div style="display:flex">
  108.           <div
  109.             v-for="(item, i) in details.feedbackImgs"
  110.             :key="i + 'img'"
  111.             style="margin-right:10px"
  112.             class="img-waper"
  113.             @click="onPreviewImg(i)"
  114.           >
  115.             <!-- 用id去显示图片，其实就是图片处理后的名称 -->
  116.             <img
  117.               :src="'/oss/api/ImageViewer/' + item.id + '.jpg?percent=0.6&quality=80&od=true'"
  118.               width="70px"
  119.               height="70px"
  120.             >
  121.           </div>
  122.         </div>
  123.       </div>
  124.       <span slot="footer" class="dialog-footer">
  125.         <el-button @click="detailsDialogVisible = false">取 消</el-button>
  126.         <el-button type="primary" @click="detailsDialogVisible = false">确 定</el-button>
  127.       </span>
  128.     </el-dialog>
  130.     <DealFeedbackDialog ref="dealFeedbackDialog" />
  131.     <el-image-viewer
  132.       v-if="showViewer"
  133.       style="z-index:99999999"
  134.       :on-close="closeViewer"
  135.       :initial-index="initialIndex"
  136.       :url-list="details.feedbackImgs.map(a=>a.fileUrl)"
  137.     />
  138.   </div>
  139. </template>
  141. <script>
  142. import DealFeedbackDialog from './components/dealFeedbackDialog.vue'
  143. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  144. export default {
  145.   name: 'GuidanceTeacher',
  146.   components: {
  147.     DealFeedbackDialog,
  148.     ElImageViewer
  149.   },
  150.   data: () => {
  151.     return {
  152.       feedbackTypes: [
  153.         { feedbackType: '1', feedbackName: '系统问题' },
  154.         { feedbackType: '2', feedbackName: '内容问题' },
  155.         { feedbackType: '3', feedbackName: '我要吐槽' }
  156.       ],
  157.       detailsDialogVisible: false,
  158.       showViewer: false,
  159.       details: {
  160.         urlDetails: '',
  161.         feedbackDescribe: '',
  162.         dealingOpinion: '',
  163.         schoolName: '',
  164.         className: '',
  165.         feedbackImgs: []
  166.       },
  167.       // selectSchoolID: "",
  168.       queryParms: {
  169.         key: '',
  170.         status: '0',
  171.         schoolID: '',
  172.         courseId: '',
  173.         dealType: 0,
  174.         queryName: '',
  175.         feedbackType: '',
  176.         PageIndex: 1,
  177.         PageSize: 20
  178.       },
  179.       dataCount: 0,
  180.       loading: true,
  181.       dataList: [] // 反馈列表
  182.     }
  183.   },
  184.   mounted() {
  185.     this.getData()
  186.   },
  187.   methods: {
  188.     showFeedbackDialog(feedbackId) {
  189.       // 调用子组件的方法打开弹窗
  190.       this.$refs.dealFeedbackDialog.openFeedbackDialog(feedbackId)
  191.     },
  192.     // 打开图片预览
  193.     onPreviewImg(i) {
  194.       // 设置预览图片的索引
  195.       this.initialIndex = i
  196.       this.showViewer = true
  197.     },
  198.     // 关闭图片预览
  199.     closeViewer() {
  200.       this.showViewer = false
  201.     },
  202.     showDetais(rowInp) {
  203.       this.details.urlDetails = rowInp.feedbackPath
  204.       this.details.feedbackDescribe = rowInp.feedbackDescribe
  205.       this.details.dealingOpinion = rowInp.dealingOpinion
  206.       this.details.schoolName = rowInp.schoolName
  207.       this.details.className = rowInp.className
  208.       this.details.feedbackImgs = JSON.parse(rowInp.feedbackImgs)
  209.       this.detailsDialogVisible = true
  210.     },
  211.     getData() {
  212.       this.loading = true
  213.       this.$http
  214.         .get(
  215.           '/education/api/Feedback/GetFeedbackList',
  216.           this.queryParms
  217.         )
  218.         .then((res) => {
  219.           console.log(res)
  220.           this.dataList = res.data.data
  221.           this.loading = false
  222.           this.dataCount = res.data.dataCount
  223.         })
  224.     },
  225.     currentChange(val) {
  226.       this.queryParms.PageIndex = val
  227.       this.getData()
  228.     },
  229.     search() {
  230.       this.queryParms.PageIndex = 1
  231.       this.getData()
  232.     }
  233.   }
  234. }
  235. </script>
  237. <style lang="scss" scoped>
  238. .clearfix {
  239.   display: flex;
  241.   .query-condition {
  242.     margin-left: 10px;
  243.   }
  245.   .el-input {
  246.     max-width: 200px;
  247.   }
  249.   .el-button {
  250.     margin-left: 10px;
  251.   }
  252. }
  253. </style>

弹窗那个组件

  1. <!-- 处理问题反馈使用的弹窗 -->
  2. <template>
  3.   <div>
  4.     <!-- 弹窗start -->
  5.     <div class="dialogContent">
  6.       <el-dialog
  7.         :visible.sync="dialogVisible"
  8.         :show-close="false"
  9.         width="700px"
  10.         height="800px"
  11.         :before-close="handleClose"
  12.       >
  13.         <div slot="title" class="dialog-footer">
  14.           <div style="font-size:16px">
  15.             问题反馈
  16.           </div>
  17.           <div class="separateline" />
  18.         </div>
  19.         <div style="margin-top:-10px">
  20.           <div style="display:flex">
  21.             <div style="width:78px;color:#000">
  22.               处理类型:
  23.             </div>
  24.             <div>
  25.               <el-radio v-model="feedbackType" label="1">同意处理</el-radio>
  26.               <el-radio v-model="feedbackType" label="2">驳回处理</el-radio>
  27.               <!-- <el-radio v-model="feedbackType" label="3">不理不睬</el-radio> -->
  28.             </div>
  29.           </div>
  30.           <div style="display:flex;margin-top: 30px;">
  31.             <div style="width:78px;color:#000;">
  32.               处理意见
  33.             </div>
  34.             <div style="flex-grow: 1">
  35.               <el-input
  36.                 v-model="describe"
  37.                 type="textarea"
  38.                 style="width:100%"
  39.                 :rows="7"
  40.                 placeholder="请输入内容"
  41.               />
  42.             </div>
  43.           </div>
  44.         </div>
  45.         <span slot="footer" class="dialog-footer">
  46.           <el-button size="small" @click="dialogVisible = false">我在想想</el-button>
  47.           <el-button type="primary" size="small" @click="saveFeedback()">确定反馈</el-button>
  48.         </span>
  49.       </el-dialog>
  50.     </div>
  51.     <!-- 弹窗end -->
  53.   </div>
  55. </template>
  57. <script>
  58. export default {
  59.   // 组件名字
  60.   name: 'FeedbackDialog',
  61.   // 组件参数
  62.   props: {
  63.     index: {
  64.       type: Number,
  65.       default: 0
  66.     }
  67.   },
  68.   data() {
  69.     return {
  70.       feedbackType: '1',
  71.       feedbackId: 0,
  72.       describe: '',
  73.       dialogVisible: false
  74.     }
  75.   },
  76.   mounted() {
  77.     // alert("组件内部加载好了"+this.dialogVisibleParameter)
  78.     this.initPic()
  79.   },
  80.   // 组件方法
  81.   methods: {
  82.     initPic() {
  84.     },
  85.     // 模态框关闭前的事件
  86.     handleClose(done) {
  87.     },
  88.     // 打开弹窗
  89.     openFeedbackDialog(feedbackId) {
  90.       this.feedbackId = feedbackId
  91.       this.dialogVisible = true
  92.     },
  93.     // 清空一下反馈的数据，比如反馈成功之后清空一下，这样下次打开的时候不会让前面的数据还在
  94.     clearFeedbackData() {
  96.     },
  97.     // 处理反馈
  98.     saveFeedback() {
  99.       // this.$alert('功能开发中...')
  100.       const _this = this
  101.       if (!this.describe) {
  102.         this.$alert('请输入反馈意见...')
  103.         return
  104.       }
  105.       // 反馈回传的数据
  106.       const feedbackData = {
  107.         DealType: this.feedbackType, // 处理类型
  108.         DealingOpinion: this.describe, // 处理意见
  109.         Id: this.feedbackId
  110.       }
  112.       this.$http.post('/education/api/Feedback/DealFeedback', feedbackData).then((res) => {
  113.         // _this.$alert('处理反馈成功!...')
  114.         _this.dialogVisible = false
  115.         // 调用父组件的刷新方法
  116.         _this.$parent.getData()
  117.         console.log(res)
  118.       })
  119.     }
  120.   }
  121. }
  122. </script>
  123. <style scoped="scoped" lang="scss">
  124. // 自定义的一根简单分割线
  125. .separateline {
  126.     height: 1px;
  127.     background: #eee;
  128.     margin-left: -40px;
  129.     margin-right: -40px;
  130.     margin-top: 9px;
  131. }
  133. // 问题截图，传递图片的样式
  134. .form-content.panle {
  135.     // padding: 20px;
  136.     padding-bottom: 10px;
  137.     // background-color: #f8f8f8;
  139.     .img-boxs {
  140.         display: flex;
  141.         /* margin-right: 46px; */
  142.         flex-wrap: wrap;
  144.         .img-waper {
  145.             margin-right: 10px;
  146.             margin-bottom: 10px;
  147.             position: relative;
  149.             .remove-icon:hover {
  150.                 cursor: pointer;
  152.                 img {
  153.                     opacity: 0.6;
  154.                 }
  155.             }
  157.             .remove-icon {
  158.                 position: absolute;
  159.                 width: 14px;
  160.                 height: 14px;
  161.                 top: -8px;
  162.                 right: -5px;
  164.                 img {
  165.                     width: 100%;
  166.                 }
  167.             }
  168.         }
  170.     }
  172.     .add-btn:hover {
  173.         cursor: pointer;
  174.         opacity: 0.6;
  175.     }
  177.     .add-btn {
  178.         width: 70px;
  179.         height: 70px;
  180.         border: solid 1px #DDDDDD;
  181.         display: flex;
  182.         align-items: center;
  183.         flex-wrap: wrap;
  184.         justify-content: space-around;
  186.         .icon-waper {
  187.             width: 18px;
  188.             height: 21px;
  189.             position: relative;
  191.             .icon-x {
  192.                 width: 19px;
  193.                 height: 5px;
  194.                 background-color: #DDDDDD;
  195.                 position: absolute;
  196.                 top: 0;
  197.                 bottom: 0;
  198.                 margin: auto;
  199.             }
  201.             .icon-y {
  202.                 height: 21px;
  203.                 width: 5px;
  204.                 background-color: #DDDDDD;
  205.                 position: absolute;
  206.                 left: 0;
  207.                 right: 0;
  208.                 margin: auto;
  209.             }
  210.         }
  211.     }
  212. }
  213. </style>
  214. <style lang="scss">
  215. // 修改el-dialog里边的默认样式
  216. .dialogContent {
  218.     .el-dialog {
  219.         background-color: #F6F8FC;
  220.     }
  222.     .el-dialog__header {
  223.         padding: 20px 40px 10px 40px;
  224.         background-color: #f6f8fc !important;
  225.     }
  227.     .el-dialog__body {
  228.         padding: 30px 40px;
  229.         color: #606266;
  230.         font-size: 14px;
  231.         word-break: break-all;
  232.     }
  234.     .el-dialog__footer {
  235.         padding: 0px 40px 30px 40px
  236.     }
  238.     // 修改默认按钮的padding也就是跳转按钮的宽度
  239.     .el-button--small,
  240.     .el-button--small.is-round {
  241.         padding: 9px 16px;
  242.     }
  244.     // 修改默认按钮的圆角为直角
  245.     .el-button--mini,
  246.     .el-button--small {
  247.         border-radius: 0px;
  248.     }
  249. }
  250. </style>

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

评价

饰心

2020/7/10 9:46:00

哇  好神奇

回复
剑轩:@饰心嘿嘿嘿，那个全局变量怎么优化呢。就是在data里边定义不用全局变量

2020/7/11 12:25:07 回复

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...

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内容可以滚动。现在需求是右侧滚...

vue-element-admin 常用表格与搜索栏界面搭配 。 element ui样式搭配。模板
界面大概的样子：代码（下方有vue3中的写法）：&lt;template&gt; &lt;divclass=&quot;app-container&quot;&gt; &lt;el-fo...

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页面，文件信...