devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件_编辑和添加用一个组件可以吗 vue element

作者：盐析白兔 | 2024-02-20 07:05:29

赞

踩

编辑和添加用一个组件可以吗 vue element

实战场景描述

我们在实际开发过程中，增删改查功能是最基础必不可少的，这里就少不了新增和编辑功能，通常都是点击按钮触发弹出框动作。

基本上新增和编辑的表单是一致的，只不过一个是空的，而另一个需要赋原始值。

因此抽出一个组件进行复用，会大大减小代码量。

首先学会点击按钮触发弹出框动作：VUE弹窗加载另一个VUE页面

1、el-table基本设置

ActivityManage.vue全部代码：

  1. <template>
  2.     <div class="mycontainer">
  3.         <div>
  4.             <h2>活动管理</h2>
  5.             <el-divider></el-divider>
  6.             <el-form :inline="true" :model="formInline" class="demo-form-inline">
  7.                 <el-form-item label="活动名称">
  8.                     <el-input  size="mini" v-model="formInline.name"></el-input>
  9.                 </el-form-item>
  10.                 <el-form-item>
  11.                     <el-button @click="onQuery" icon="el-icon-search" size="mini" type="primary">查询</el-button>
  12.                     <el-button @click="onQuery" icon="el-icon-refresh" size="mini" type="danger">重置</el-button>
  13.                 </el-form-item>
  14.             </el-form>
  15.         </div>
  16.         <div>
  17.             <el-button @click="" icon="el-icon-plus" @click="openWindow" size="mini">添加</el-button>
  18.             <el-dialog  :visible.sync="windowVisible" append-to-body>
  19.                <ActivityWindow v-if="windowVisible" ref="popWindow"></ActivityWindow>
  20.                 <span slot="footer" class="dialog-footer">
  21.                     <el-button type="primary" @click="onSubmit">提交</el-button>
  22.                     <el-button @click="windowVisible = false">取消</el-button>
  23.                 </span>
  24.             </el-dialog>
  25.         </div>
  26.         <div>
  27.             <el-divider></el-divider>
  28.             <el-table :data="tableData"   border  stripe style="width: 100%">
  29.                 <el-table-column label="活动名称" prop="name">
  30.                 </el-table-column>
  31.                 <el-table-column label="活动区域" prop="region"></el-table-column>
  32.                 <el-table-column label="日期"  prop="date1"></el-table-column>
  33.                 <el-table-column label="时间" prop="date2"></el-table-column>
  34.                 <el-table-column label="是否推广"  prop="isAdvertise" :formatter="formatAdvertise"></el-table-column>
  35.                 <el-table-column label="即时配送"  prop="delivery">
  36.                     <template slot-scope="scope" >
  37.                         <el-switch
  38.                                 style="display: block;"
  39.                                 v-model="scope.row.delivery"
  40.                                 active-text="是"
  41.                                 inactive-text="否">
  42.                         </el-switch>
  43.                     </template>
  44.                 </el-table-column>
  45.                 <el-table-column label="活动性质"  prop="type"></el-table-column>
  46.                 <el-table-column label="特殊资源"  prop="resource"></el-table-column>
  47.                 <el-table-column label="活动形式"  prop="desc"></el-table-column>
  48.                 <el-table-column align="center" label="操作" width="180">
  49.                     <template slot-scope="scope">
  50.                         <el-button  @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
  51.                         <el-button  @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" size="mini">删除</el-button>
  52.                     </template>
  53.                 </el-table-column>
  54.             </el-table>
  55.         </div>
  56.     </div>
  57. </template>
  58.  
  59. <script>
  60.   import ActivityWindow from "@/components/views/ActivityWindow";
  61.   export default {
  62.     name: 'User',
  63.     components: {
  64.       ActivityWindow
  65.     },
  66.     data() {
  67.       return {
  68.         windowVisible: false,
  69.         formInline: {
  70.           name: ''
  71.         },
  72.         tableData: [{
  73.           name: '活动名称1',
  74.           region: '区域一',
  75.           date1: '2020-08-09',
  76.           date2: '11:40:00',
  77.           isAdvertise:'1',
  78.           delivery: false,
  79.           type: ['地推活动','线下主题活动'],
  80.           resource: '线下场地免费',
  81.           desc: '这是一个很好的活动'
  82.         },
  83.           {
  84.             name: '活动名称2',
  85.             region: '区域二',
  86.             date1: '2020-07-09',
  87.             date2: '12:00:00',
  88.             isAdvertise:'0',
  89.             delivery: true,
  90.             type: ['美食/餐厅线上活动','单纯品牌曝光'],
  91.             resource: '线上品牌商赞助',
  92.             desc: '这是一个很不好的活动'
  93.           },
  94.           {
  95.             name: '活动名称3',
  96.             region: '区域一',
  97.             date1: '2020-09-09',
  98.             date2: '11:43:13',
  99.             isAdvertise:'0',
  100.             delivery: true,
  101.             type: ['美食/餐厅线上活动','线下主题活动','单纯品牌曝光'],
  102.             resource: '线上品牌商赞助',
  103.             desc: '这是一个ok的活动'
  104.           }
  105.         ]
  106.       }
  107.     },
  108.     methods: {
  109.       formatAdvertise(row){
  110.         return row.isAdvertise === '1' ? '是' : row.isAdvertise === '0' ? '否' : '未知'
  111.       },
  112.       openWindow(){
  113.         this.windowVisible = true;
  114.       },
  115.       handleEdit(index, row) {
  116.         this.windowVisible = true;
  117.       },
  118.       onQuery() {
  119.  
  120.       },
  121.       handleDelete(index, row) {
  122.         console.log(index, row);
  123.       },
  124.       onSubmit(){
  125.  
  126.       }
  127.     },
  128.   }
  129. </script>
  130. <style>
  131.     .mycontainer {
  132.         display: flex;
  133.         flex-direction: column;
  134.         justify-content: space-around
  135.     }
  136. </style>

以上代码需要注意的点：

  1. dialog的引用，为了表单提交方便，我们把“提交”“取消”按钮放到了基础页
  2. el-switch在el-table中的使用
  3. 对于某些字段的formatter

2、抽离出弹窗组件

ActivityWindow.vue完整代码： 

  1. <!--一个组件多用，添加/编辑弹窗-->
  2. <template>
  3.     <div class="mycontainer">
  4.         <el-form ref="form" :model="form" label-width="80px">
  5.             <el-form-item label="活动名称">
  6.                 <el-input v-model="form.name"></el-input>
  7.             </el-form-item>
  8.             <el-form-item label="活动区域">
  9.                 <el-select v-model="form.region" placeholder="请选择活动区域">
  10.                     <el-option label="区域一" value="shanghai"></el-option>
  11.                     <el-option label="区域二" value="beijing"></el-option>
  12.                 </el-select>
  13.             </el-form-item>
  14.             <el-form-item label="活动时间">
  15.                 <el-col :span="11">
  16.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  17.                 </el-col>
  18.                 <el-col class="line" :span="2">-</el-col>
  19.                 <el-col :span="11">
  20.                     <el-time-select  placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-select>
  21.                 </el-col>
  22.             </el-form-item>
  23.             <el-form-item label="是否推广">
  24.                 <el-radio-group v-model="form.isAdvertise">
  25.                     <el-radio label="1">是</el-radio>
  26.                     <el-radio label="0">否</el-radio>
  27.                 </el-radio-group>
  28.             </el-form-item>
  29.             <el-form-item label="即时配送">
  30.                 <el-switch v-model="form.delivery" active-text="是" inactive-text="否"></el-switch>
  31.             </el-form-item>
  32.             <el-form-item label="活动性质">
  33.                 <el-checkbox-group v-model="form.type">
  34.                     <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  35.                     <el-checkbox label="地推活动" name="type"></el-checkbox>
  36.                     <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  37.                     <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  38.                 </el-checkbox-group>
  39.             </el-form-item>
  40.             <el-form-item label="特殊资源">
  41.                 <el-radio-group v-model="form.resource">
  42.                     <el-radio label="线上品牌商赞助"></el-radio>
  43.                     <el-radio label="线下场地免费"></el-radio>
  44.                 </el-radio-group>
  45.             </el-form-item>
  46.             <el-form-item label="活动形式">
  47.                 <el-input type="textarea" v-model="form.desc"></el-input>
  48.             </el-form-item>
  49.         </el-form>
  50.     </div>
  51. </template>
  52.  
  53. <script>
  54.   export default {
  55.     name: '',
  56.     components: {},
  57.     data() {
  58.       return {
  59.         form: {
  60.           name: '',
  61.           region: '',
  62.           date1: '',
  63.           date2: '',
  64.           isAdvertise:'',
  65.           delivery: false,
  66.           type: [],
  67.           resource: '',
  68.           desc: ''
  69.         }
  70.       }
  71.     },
  72.     methods: {
  73.  
  74.     },
  75.   }
  76. </script>
  77. <style>
  78.     .mycontainer {
  79.         display: flex;
  80.         flex-direction: column;
  81.         justify-content: space-around
  82.     }
  83. </style>

至此，我们只是给添加和编辑按钮弹窗动作。

3、编辑时设置form表单初始化

 首先点击编辑按钮，会将表格的row数据提取出来，而这个row就是编辑弹窗的初始表单，因此需要有一个表单的传递和接收过程。

在基础页传递参数给弹窗

  1.         this.$nextTick(()=>{
  2.           this.$refs.popWindow.dataInit(row);
  3.         })

弹窗接收参数并复制给form表单

  1.       dataInit(data){
  2.             if(data){
  3.               this.form = data;
  4.             }
  5.       },

4、表单提交时做添加/编辑状态的区分

因为两个操作共用一个组件，在提交时还需要一个参数做区分，然后根据这个参数状态确定对应的axious

5、最终呈现效果：

6、页面完整代码

ActivityManage.vue完整代码：

  1. <template>
  2.     <div class="mycontainer">
  3.         <div>
  4.             <h2>活动管理</h2>
  5.             <el-divider></el-divider>
  6.             <el-form :inline="true" :model="formInline" class="demo-form-inline">
  7.                 <el-form-item label="活动名称">
  8.                     <el-input  size="mini" v-model="formInline.name"></el-input>
  9.                 </el-form-item>
  10.                 <el-form-item>
  11.                     <el-button @click="onQuery" icon="el-icon-search" size="mini" type="primary">查询</el-button>
  12.                     <el-button @click="onQuery" icon="el-icon-refresh" size="mini" type="danger">重置</el-button>
  13.                 </el-form-item>
  14.             </el-form>
  15.         </div>
  16.         <div>
  17.             <el-button @click="" icon="el-icon-plus" @click="openWindow" size="mini">添加</el-button>
  18.             <el-dialog  :visible.sync="windowVisible" append-to-body>
  19.                 <ActivityWindow v-if="windowVisible" ref="popWindow"></ActivityWindow>
  20.                 <span slot="footer" class="dialog-footer">
  21.                     <el-button type="primary" @click="onSubmit">提交</el-button>
  22.                     <el-button @click="windowVisible = false">取消</el-button>
  23.                 </span>
  24.             </el-dialog>
  25.         </div>
  26.         <div>
  27.             <el-divider></el-divider>
  28.             <el-table :data="tableData"   border  stripe style="width: 100%">
  29.                 <el-table-column label="活动名称" prop="name">
  30.                 </el-table-column>
  31.                 <el-table-column label="活动区域" prop="region"></el-table-column>
  32.                 <el-table-column label="日期"  prop="date1"></el-table-column>
  33.                 <el-table-column label="时间" prop="date2"></el-table-column>
  34.                 <el-table-column label="是否推广"  prop="isAdvertise" :formatter="formatAdvertise"></el-table-column>
  35.                 <el-table-column label="即时配送"  prop="delivery">
  36.                     <template slot-scope="scope" >
  37.                         <el-switch
  38.                                 style="display: block;"
  39.                                 v-model="scope.row.delivery"
  40.                                 active-text="是"
  41.                                 inactive-text="否">
  42.                         </el-switch>
  43.                     </template>
  44.                 </el-table-column>
  45.                 <el-table-column label="活动性质"  prop="type"></el-table-column>
  46.                 <el-table-column label="特殊资源"  prop="resource"></el-table-column>
  47.                 <el-table-column label="活动形式"  prop="desc"></el-table-column>
  48.                 <el-table-column align="center" label="操作" width="180">
  49.                     <template slot-scope="scope">
  50.                         <el-button  @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
  51.                         <el-button  @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" size="mini">删除</el-button>
  52.                     </template>
  53.                 </el-table-column>
  54.             </el-table>
  55.         </div>
  56.     </div>
  57. </template>
  58.  
  59. <script>
  60.   import ActivityWindow from "@/components/views/ActivityWindow";
  61.   export default {
  62.     name: 'User',
  63.     components: {
  64.       ActivityWindow
  65.     },
  66.     data() {
  67.       return {
  68.         windowVisible: false,
  69.         addOperate: undefined,
  70.         formInline: {
  71.           name: ''
  72.         },
  73.         tableData: [{
  74.           name: '活动名称1',
  75.           region: '区域一',
  76.           date1: '2020-08-09',
  77.           date2: '11:40:00',
  78.           isAdvertise:'1',
  79.           delivery: false,
  80.           type: ['地推活动','线下主题活动'],
  81.           resource: '线下场地免费',
  82.           desc: '这是一个很好的活动'
  83.         },
  84.           {
  85.             name: '活动名称2',
  86.             region: '区域二',
  87.             date1: '2020-07-09',
  88.             date2: '12:00:00',
  89.             isAdvertise:'0',
  90.             delivery: true,
  91.             type: ['美食/餐厅线上活动','单纯品牌曝光'],
  92.             resource: '线上品牌商赞助',
  93.             desc: '这是一个很不好的活动'
  94.           },
  95.           {
  96.             name: '活动名称3',
  97.             region: '区域一',
  98.             date1: '2020-09-09',
  99.             date2: '11:43:13',
  100.             isAdvertise:'0',
  101.             delivery: true,
  102.             type: ['美食/餐厅线上活动','线下主题活动','单纯品牌曝光'],
  103.             resource: '线上品牌商赞助',
  104.             desc: '这是一个ok的活动'
  105.           }
  106.         ]
  107.       }
  108.     },
  109.     methods: {
  110.       formatAdvertise(row){
  111.         return row.isAdvertise === '1' ? '是' : row.isAdvertise === '0' ? '否' : '未知'
  112.       },
  113.       openWindow(){
  114.         this.windowVisible = true;
  115.         this.addOperate = true;
  116.       },
  117.       handleEdit(index, row) {
  118.         this.windowVisible = true;
  119.         this.addOperate = false;
  120.         this.$nextTick(()=>{
  121.           this.$refs.popWindow.dataInit(row);
  122.         });
  123.       },
  124.       onSubmit(){
  125.         //需要提交的form表单
  126.         var form = this.$refs.popWindow.form;
  127.         if (this.addOperate) {
  128.           //axious 添加新增
  129.         }else{
  130.           //axious 编辑修改
  131.         }
  132.  
  133.       },
  134.       onQuery() {
  135.  
  136.       },
  137.       handleDelete(index, row) {
  138.         console.log(index, row);
  139.       },
  140.     },
  141.   }
  142. </script>
  143. <style>
  144.     .mycontainer {
  145.         display: flex;
  146.         flex-direction: column;
  147.         justify-content: space-around
  148.     }
  149. </style>

 ActivityWindow.vue完整代码：

  1. <!--一个组件多用，添加/编辑弹窗-->
  2. <template>
  3.     <div class="mycontainer">
  4.         <el-form ref="form" :model="form" label-width="80px">
  5.             <el-form-item label="活动名称">
  6.                 <el-input v-model="form.name"></el-input>
  7.             </el-form-item>
  8.             <el-form-item label="活动区域">
  9.                 <el-select v-model="form.region" placeholder="请选择活动区域">
  10.                     <el-option label="区域一" value="shanghai"></el-option>
  11.                     <el-option label="区域二" value="beijing"></el-option>
  12.                 </el-select>
  13.             </el-form-item>
  14.             <el-form-item label="活动时间">
  15.                 <el-col :span="11">
  16.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  17.                 </el-col>
  18.                 <el-col class="line" :span="2">-</el-col>
  19.                 <el-col :span="11">
  20.                     <el-time-select  placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-select>
  21.                 </el-col>
  22.             </el-form-item>
  23.             <el-form-item label="是否推广">
  24.                 <el-radio-group v-model="form.isAdvertise">
  25.                     <el-radio label="1">是</el-radio>
  26.                     <el-radio label="0">否</el-radio>
  27.                 </el-radio-group>
  28.             </el-form-item>
  29.             <el-form-item label="即时配送">
  30.                 <el-switch v-model="form.delivery" active-text="是" inactive-text="否"></el-switch>
  31.             </el-form-item>
  32.             <el-form-item label="活动性质">
  33.                 <el-checkbox-group v-model="form.type">
  34.                     <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  35.                     <el-checkbox label="地推活动" name="type"></el-checkbox>
  36.                     <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  37.                     <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  38.                 </el-checkbox-group>
  39.             </el-form-item>
  40.             <el-form-item label="特殊资源">
  41.                 <el-radio-group v-model="form.resource">
  42.                     <el-radio label="线上品牌商赞助"></el-radio>
  43.                     <el-radio label="线下场地免费"></el-radio>
  44.                 </el-radio-group>
  45.             </el-form-item>
  46.             <el-form-item label="活动形式">
  47.                 <el-input type="textarea" v-model="form.desc"></el-input>
  48.             </el-form-item>
  49.         </el-form>
  50.     </div>
  51. </template>
  52.  
  53. <script>
  54.   export default {
  55.     name: '',
  56.     components: {},
  57.     data() {
  58.       return {
  59.         form: {
  60.           name: '',
  61.           region: '',
  62.           date1: '',
  63.           date2: '',
  64.           isAdvertise:'',
  65.           delivery: false,
  66.           type: [],
  67.           resource: '',
  68.           desc: ''
  69.         }
  70.       }
  71.     },
  72.     methods: {
  73.       dataInit(data){
  74.         if(data){
  75.           this.form = data;
  76.           console.info(data);
  77.         }
  78.       },
  79.  
  80.     },
  81.   }
  82. </script>
  83. <style>
  84.     .mycontainer {
  85.         display: flex;
  86.         flex-direction: column;
  87.         justify-content: space-around
  88.     }
  89. </style>

一点疑问

在给编辑弹窗赋初始值时，遇到一个很费解的小问题，给radio赋初始值，我在其他项目中都是用以下这种形式的：

  1.                     <el-form-item label="性别">
  2.                         <el-radio-group v-model="form.sex">
  3.                             <el-radio :label="1">男</el-radio>
  4.                             <el-radio :label="0">女</el-radio>
  5.                         </el-radio-group>
  6.                     </el-form-item>

但是这个测试项目中如法炮制却不行，没办法默认选中初始值，最后试着用了这样的，没想到可以啦

  1.             <el-form-item label="是否推广">
  2.                 <el-radio-group v-model="form.isAdvertise">
  3.                     <el-radio label="1">是</el-radio>
  4.                     <el-radio label="0">否</el-radio>
  5.                 </el-radio-group>
  6.             </el-form-item>

我比较了两个项目中用到的vue和Element-UI的版本都是一致的，想不出是哪里出了问题，在此说明一下，如果有了解的小伙伴欢迎留言指摘。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/119010
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号