返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue table表格中如何控制下拉框的显示隐藏
  • 952
分享到

vue table表格中如何控制下拉框的显示隐藏

vue table表格table下拉框的显示table下拉框的隐藏 2023-01-18 12:01:04 952人浏览 安东尼
摘要

目录Vue table表格控制下拉框的显示隐藏vue下拉框清空总结vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏

vue table表格控制下拉框的显示隐藏

需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏

平时

点击

失去焦点后变化平时的显示

        <vxe-table-column align="center" title="类型" width="270" style="height:40px;" field="collectionType">
          <template slot-scope="scope">
            <!--                 @change="changeSelect(scope,$event)"
                @visible-change="handleBlur(scope,$event)" -->
            <el-select v-if="scope.row.isModifiy2" ref="GoodsSelect" v-model="scope.row.collectionType" size="mini" placeholder="请选择" @visible-change="handleBlur(scope,$event)" @change="changeSelect(scope.row,$event)">
              <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <template v-else><div style="cursor:pointer">{{ scope.row.collectionType }}</div></template>
          </template>

通过设置scope.row.isModifiy2的属性判断下拉框的显示隐藏

通过插槽,获取整个表格具体的某一个值

通过这三个属性来获取到点击的某个值,

row获取那一行的数据,column获取那一列的数据,

      const index = this.dataTable.findIndex((item) => { return column.property === item.prop })
//获取点击值那一列的索引
      if (!this.dataTable[index]) return
      if (this.dataTable[index].isModifiy !== undefined) {
        row.isModifiy = true
        this.dataTable[index].isModifiy = true
        //上面的isModifiy是为了解决复杂的表单需要的设置
        this.dataTable = Object.assign([], this.dataTable)
        //要进行数据的深拷贝,不然第一次点击的时会有点问题
        this.$nextTick(() => {

 e为false时,就是下拉框隐藏时,就会执行下面操作,让下拉框隐藏

 

vue下拉框清空

<Select ref="vendorId" v-model="fORMInline.vendorId" @on-open-change="venSelect" filterable style="width: 162px;" @on-change="vendorChange"
            v-if="vendorShow">
            <Option v-for="item in vendorList" :value="item.vendorId" :key="item.vendorId">{{ item.venAbbName + '-' + item.vendorCode }}</Option>
  </Select>

要重置查询的数据。在重置中清空refs 

// 重置
      reloadFun() {
        this.formInline = {
          vendorId: '',
          productCode: '',
          inventoryCode: '',
          sendDate: '',
          remark: '',
          cwhCode:''
        }
        this.$refs.vendorId.query = ''//.query是因为this.$refs.vendorId只能清空展示的下拉框的数据,不能清空底层的数据所以要.query清空底层数据
        this.tableData = []
      },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue table表格中如何控制下拉框的显示隐藏

本文链接: https://lsjlt.com/news/178108.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue table表格中如何控制下拉框的显示隐藏
    目录vue table表格控制下拉框的显示隐藏vue下拉框清空总结vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 ...
    99+
    2023-01-18
    vue table表格 table下拉框的显示 table下拉框的隐藏
  • vue实现动态控制表格列的显示隐藏
    本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码,供大家参考,具体内容如下 一、效果 如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对...
    99+
    2024-04-02
  • vue elementUI表格控制怎么显示隐藏对应列
    这篇文章主要介绍“vue elementUI表格控制怎么显示隐藏对应列”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue elementUI表格控制怎么显示隐藏对应列”文章能帮...
    99+
    2023-06-30
  • Vue实现动态控制表格列的显示和隐藏
    本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码,供大家参考,具体内容如下 效果如图: 表头标题是重复的、为了能看到滚动效果 v-if=“lists[...
    99+
    2024-04-02
  • vue实现动态控制el-table表格列的展示与隐藏
    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <templ...
    99+
    2024-04-02
  • vue+elementui实现动态控制表格列的显示和隐藏
    vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏,供大家参考,具体内容如下 imdex.vue <template>   <div&g...
    99+
    2024-04-02
  • vue如何控制元素的隐藏与显示
    vue如何控制元素的隐藏与显示,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。vue控制元素隐藏与显示的方法:1、利用“v-if...
    99+
    2024-04-02
  • jQuery如何设置下拉框显示与隐藏效果
    本篇内容介绍了“jQuery如何设置下拉框显示与隐藏效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!jQuery的 hide() 和 sh...
    99+
    2023-06-17
  • Vue怎么实现动态控制表格列的显示和隐藏
    本篇内容介绍了“Vue怎么实现动态控制表格列的显示和隐藏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果如图:表头标题是重复的、为了能看到...
    99+
    2023-06-29
  • vue中怎么控制元素显示隐藏
    这篇文章主要讲解了“vue中怎么控制元素显示隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么控制元素显示隐藏”吧! ...
    99+
    2024-04-02
  • vueelementUI表格控制显示隐藏对应列的方法
    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据。前端根据选项来显示对应的列,如果不勾选,默认全部隐...
    99+
    2024-04-02
  • vue+elementui怎么实现动态控制表格列的显示和隐藏
    这篇文章主要介绍了vue+elementui怎么实现动态控制表格列的显示和隐藏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue+elementui怎么实现动态控制表格列的显示和隐藏文章都会有所收获,下面我们...
    99+
    2023-06-30
  • vue+elementUI配置表格的列显示与隐藏
    vue+elementUI配置表格的列显示与隐藏,供大家参考,具体内容如下 描述: 表格的列过多时,可以根据需要控制列的显示与隐藏,目前是采用Vue+elementUI(适配Vue3...
    99+
    2024-04-02
  • Xamarin.Forms中如何控制活动指示器的显示隐藏
    小编给大家分享一下Xamarin.Forms中如何控制活动指示器的显示隐藏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Xamarin.Forms中活动指示器的显...
    99+
    2023-06-04
  • jquery如何控制元素显示和隐藏
    使用jQuery可以通过以下方法来控制元素的显示和隐藏:1. 显示元素:使用`show()`方法来显示元素。例如:`$("#elem...
    99+
    2023-08-08
    jquery
  • labview隐藏的控件如何显示
    要显示LabVIEW中隐藏的控件,可以按照以下步骤操作:1. 在LabVIEW的界面上,右击或者长按鼠标左键,选择"Visible ...
    99+
    2023-09-15
    labview
  • jquery如何控制li元素的显示与隐藏
    小编给大家分享一下jquery如何控制li元素的显示与隐藏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jquery控制li元素...
    99+
    2024-04-02
  • 怎么利用vue控制元素的显示与隐藏
    这篇文章主要介绍了怎么利用vue控制元素的显示与隐藏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么利用vue控制元素的显示与隐藏文章都会有所收获,下面我们一起来看看吧。 方法:使用 v-...
    99+
    2023-07-04
  • vue+elementUI怎么配置表格的列显示与隐藏
    这篇文章主要介绍“vue+elementUI怎么配置表格的列显示与隐藏”,在日常操作中,相信很多人在vue+elementUI怎么配置表格的列显示与隐藏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue+e...
    99+
    2023-06-30
  • JavaScript如何控制页面元素的显示和隐藏
    在现代网页设计中,JavaScript 可谓是无处不在,它的功能也十分强大。其中,控制页面元素的显示和隐藏是很多开发人员经常需要用到的功能。本篇文章就将介绍 JavaScript 如何实现控制页面元素的显示和隐藏。一、通过修改元素的 dis...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作