引入弹窗组件两种写法v-if || ￥refs

已于 2022-03-15 17:36:03 修改
阅读量1.1k 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-03-15 17:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42401946/article/details/123507805
版权

第一种：v-if方法
index.vue

<template>
  <div class="twoProcessTagContainer">
    <el-row style="background: #ffffff; padding: 20px 10px 0px">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleMoreRework">
          批量修改二次加工指标
        </el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      border
      stripe
      :data="tableData"
      size="mini"
      :header-cell-class-name="headerRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作" align="center" min-width="160px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            plain
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 多个编辑 -->
    <more-dialog
      v-if="moreShow"
      @close="close"
      @sureClose="sureClose"
      :checkedList="checkedList"
    ></more-dialog>

    <!-- 单个编辑 -->
    <edit-dialog
      v-if="editShow"
      @editClose="editClose"
      :row="row"
    ></edit-dialog>
  </div>
</template>
<script>
import editDialog from "./editDialog.vue";
import MoreDialog from "./moreDialog.vue";
export default {
  components: { editDialog, MoreDialog },
  data() {
    return {
      moreShow: false,
      editShow: false,
      checkedList: [],
      row: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    headerRowClassName({ row, rowIndex }) {
      return "header_row";
    },
    handleMoreRework() {
      this.moreShow = true;
    },
    close() {
      this.moreShow = false;
    },
    sureClose() {
      this.moreShow = false;
    },
    handleSelectionChange(val) {
      this.checkedList = val;
    },

    handleEdit(index, row) {
      this.row = row;
      this.editShow = true;
    },
    editClose() {
      console.log("111");
      this.editShow = false;
    },
  },
};
</script>
<style lang="less">
.twoProcessTagContainer {
  ::v-deep .header_row {
    background: #f2f2f2;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .tagSelectSty .el-input {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-form-item__label {
    line-height: 28px;
  }
  .el-form-item__content {
    line-height: 28px;
  }

  .el-dialog__body {
    padding-right: 80px;
  }
}
</style>

editDialog.vue单个编辑

<template>
  <div>
    <!-- 单个编辑 -->
    <el-dialog
      title="提示"
      :visible.sync="editDialogVisible"
      width="30%"
      :before-close="close"
    >
      <el-form ref="form" :model="formEdit" label-width="150px">
        {{ row }}
        <el-form-item label="是否二次加工：">
          <el-select
            v-model="formEdit.address"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊口径说明：">
          <el-input v-model="formEdit.date" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据分级标签：">
          <el-input v-model="formEdit.name" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini"> 取 消 </el-button>
        <el-button type="primary" @click="onSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["row"],
  data() {
    return {
      editDialogVisible: true,
      formEdit: {},
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      if (this.row) {
        this.$emit("editClose");
      }
    },
    close() {
      this.$emit("editClose");
    },
  },
};
</script>

<style>
</style>

moreDialog.vue多个编辑

<template>
  <div>
    <!-- 批量修改 -->
    <el-dialog
      title="提示"
      :visible.sync="moreDialogVisible"
      width="30%"
      :before-close="close"
    >
      {{ checkedList }}
      <el-form ref="form" :model="formMore" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select v-model="formMore.rework" placeholder="请选择" size="mini">
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini"> 取 消 </el-button>
        <el-button type="primary" @click="onMoreSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["checkedList"],
  data() {
    return {
      moreDialogVisible: true,
      newCheckedList: [],

      formMore: {
        rework: "",
      },
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    close() {
      this.$emit("close");
    },
    onMoreSubmit() {
      console.log("123");
      console.log("formMore", this.formMore);
      if (this.checkedList) {
        this.$emit("sureClose");
      }
    },
  },
};
</script>

<style>
</style>

第二种方法：￥refs方法
index.vue

<template>
  <div class="twoProcessTagContainer">
    <el-row style="background: #ffffff; padding: 20px 10px 0px">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleMoreRework">
          批量修改二次加工指标
        </el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      border
      stripe
      :data="tableData"
      size="mini"
      :header-cell-class-name="headerRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作" align="center" min-width="160px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            plain
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 多个编辑 -->
    <more-dialog ref="moreDialog"></more-dialog>

    <!-- 单个编辑 -->
    <edit-dialog ref="editDialog"></edit-dialog>
  </div>
</template>
<script>
import editDialog from "./editDialog.vue";
import MoreDialog from "./moreDialog.vue";
export default {
  components: { editDialog, MoreDialog },
  data() {
    return {
      checkedList: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    headerRowClassName({ row, rowIndex }) {
      return "header_row";
    },
    handleMoreRework() {
      this.$refs.moreDialog.moreDialogVisible = true;
      this.$refs.moreDialog.newCheckedList = this.checkedList;
    },
    handleSelectionChange(val) {
      this.checkedList = val;
    },

    handleEdit(index, row) {
      console.log("123", this.$refs.editDialog);
      this.$refs.editDialog.editDialogVisible = true;
      this.$refs.editDialog.formEdit = row;
    },
  },
};
</script>
<style lang="less">
.twoProcessTagContainer {
  ::v-deep .header_row {
    background: #f2f2f2;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
  ::v-deep .el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .tagSelectSty .el-input {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-form-item__label {
    line-height: 28px;
  }
  .el-form-item__content {
    line-height: 28px;
  }

  .el-dialog__body {
    padding-right: 80px;
  }
}
</style>

editDialog.vue 单个编辑

<template>
  <div>
    <!-- 单个编辑 -->
    <el-dialog title="提示" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="form" :model="formEdit" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select
            v-model="formEdit.address"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊口径说明：">
          <el-input v-model="formEdit.date" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据分级标签：">
          <el-input v-model="formEdit.name" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="mini">
          取 消
        </el-button>
        <el-button type="primary" @click="onSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editDialogVisible: false,
      formEdit: {},
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      this.editDialogVisible = false;
      console.log("formEdit!", this.formEdit);
    },
  },
};
</script>

<style>
</style>

moreDialog.vue 多个编辑

<template>
  <div>
    <!-- 批量修改 -->
    <el-dialog title="提示" :visible.sync="moreDialogVisible" width="30%">
      {{ newCheckedList }}
      <el-form ref="form" :model="formMore" label-width="150px">
        <el-form-item label="是否二次加工：">
          <el-select v-model="formMore.rework" placeholder="请选择" size="mini">
            <el-option
              v-for="item in isReworkOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moreDialogVisible = false" size="mini">
          取 消
        </el-button>
        <el-button type="primary" @click="onMoreSubmit" size="mini">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moreDialogVisible: false,
      newCheckedList: [],

      formMore: {
        rework: "",
      },
      isReworkOption: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onMoreSubmit() {
      console.log("123");
      this.moreDialogVisible = false;
    },
  },
};
</script>

<style>
</style>
浅巷长歌999
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端v-if 动态控制el-button 显示
weixin_51821247的博客
02-22 1494
Vue 根据后台返回值显示不同的按钮。
如何封装一个Vue + ElementUI的弹窗组件
三拾的博客
03-10 3604
本文将介绍如何封装一个Vue和ElementUI的弹窗组件。弹窗组件是Web开发中常用的交互组件，可以用于展示一些重要信息、警告，或者用于用户的输入。
Vue组件封装方案对比——v-if方式与内置component方式_vue component is 与v-if
最新发布
2401_84616838的博客
05-16 387
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。props。
v-if下的元素 $refs失效
m0_61004873的博客
04-21 1926
1.v-if下的dom元素，用this.$ref.xxx方法会获取不到 解决方法 v-show代替v-if 因为v-if是通过控制dom节点的显示或隐藏来实现的，所以不满足情况的时候dom节点不会生成，而$refs是来操作dom的，所以这时候就是undefind.而v-show是通过控制css的dispaly属性来实现元素的显示或者隐藏。此时的dom是存在的，已经生成过了。 ...
Vue+ElementUi 基于Tree实现动态节点添加，节点自定义为输入框列
zhangruilinmoo
12-21 1796
Vue+ElementUi 基于Tree实现动态节点添加，节点自定义为输入框列
$refs的作用及操作流程
li5466667的博客
05-10 3040
$refs的的使用方法 作用:可以获取dom元素和子组件实例 获取到原生的dom标签 <template> <div> <h1 ref="myH1">1. ref获取原生dom</h1> <button @click="fn">点击修改上面内容</button> </div> </template> <script> export default { methods: {
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
3. 当不能使用 `v-if` 时，可以尝试通过操作组件的 `ref` 或者监听事件来间接控制显示状态，但这种方法可能破坏组件的封装性。 4. 调整组件的 CSS 样式，确保 `display:none` 能够正确应用，但这可能需要深入理解...
深入理解vue.js中的v-if和v-show
10-19
主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料，文中详细介绍两者的共同点和区别，通过图文介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
use-dynamic-refs:动态设置和获取 Refs 的 React 钩子
05-31
React使用动态参考用 create-react-library 制作安装npm install --save use-dynamic-refs用法 import React , { useEffect } from 'react' ;import useDynamicRefs from 'use-dynamic-refs' ;const Example = ( ) =...
vue基本使用--refs获取组件或元素的实例
10-16
今天小编就为大家分享一篇vue基本使用--refs获取组件或元素的实例，具有很好的参考价值，希望对大家有所帮助。一起个跟随小编过来看看吧
Vue中关闭弹窗组件时销毁并隐藏操作
11-19
在Element UI的Dialog组件中，我们通常使用`v-if`或`v-show`来控制弹窗的显示与隐藏。`v-if`与`v-show`的区别在于，`v-if`会根据其表达式的真假值直接销毁或创建组件实例，而`v-show`只是简单地切换CSS的`display`...
Vue中的$ref和$refs属性介绍与使用
czj1049561601的博客
03-01 1627
除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开 在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现 常用的属性有： 1：vm.$el //获取vue实例关联的Dom元素 2: vm.$data //获取vue实例的data选项 3：vm.$options //获取vue实例的自定义属性 4：vm.$refs //获取vue实例中所有含有ref属性的dom元素，如果有多
Vue2.0
jxmchou的博客
10-24 214
初识Vue 引入Vue 的两个源文件 <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/vue.min.js"></script> 大致模块-> root容器、Vue实例、 <div id='#root'>{{uname}},{{address}}</div>
Vue(三)：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_51000853的博客
09-04 684
方法来排序，计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了。（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的，不写的时候默认index作为key。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
VUE中$refs的基本用法
热门推荐
wh710107079的博客
03-06 15万+
ref 有三种用法： 　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素 　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。 　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 应注意的坑...
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
weixin_45744454的博客
04-11 8528
描述： 在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱，使用v-show没效果，截图及代码如下： <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize ) " tooltip-effect="dark" style="width: 100%" :row-key
elemnetUI 关于el-button禁用属性的小坑
reol44的博客
04-08 3362
使用cdn引入elementui的页面中,对el-table头部的自定义中使用了el-button因为做的是个刷新表格的功能,所以我想在点击以后给按钮设置disabled:true 防止短时间触发多次,结果一直不能实现 这是我页面样式 这是我的el-table自定义表头的代码 只复制了按钮定义那部分的 <el-table-column fixed="right" align="center" width="210"> <template slot="header"> .
v-for和v-if同时使用（案例分析：循环最新的前14条数据显示） - 踩坑篇
草巾冒小子的博客
04-10 2520
Vue官方文档：永远不要把 v-if 和 v-for 同时用在同一个元素上。 官方文档： 避免 v-if 和 v-for 用在一起 阅读上述文档：说明vue不支持二者放到同一个标签中使用 否则真的会失效bug！ <div class="item nohover"> <el-row :gutter="30"> <el-col :span="1...
利用Vue动态更改Element标签的属性(主要是通过v-if和v-else整个替换实现)
郭宝的博客
09-27 1万+
代码如下： &lt;template&gt; &lt;div&gt; ===============================33、利用Vue动态更改Element标签的属性(主要是通过v-if和v-else整个替换实现)=============================== &lt;div&gt; &lt;button @click="disa...
v-if $refs
09-16
v-if和$refs是Vue.js中常用的两个功能。v-if是Vue的指令之一，用于根据条件来控制DOM节点的显示或隐藏。当条件为真时，相关的DOM节点会被渲染出来，否则不会生成相应的DOM节点。$refs则是Vue实例的属性之一，用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值