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

目录
  • vue table表格控制下拉框的显示隐藏
  • vue下拉框清空
  • 总结

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 = []
      },

总结

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

(0)

相关推荐

  • Vue实现动态控制表格列的显示和隐藏

    本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码,供大家参考,具体内容如下 效果如图: 表头标题是重复的.为了能看到滚动效果 v-if=“lists[0].ispass” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示.取消勾选隐藏.默认勾选 <el-dropdown :hide-on-click="false">             <i class="iconfont icon-shaixuan" ></i

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • vue实现动态控制el-table表格列的展示与隐藏

    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <template>     <div class="page">         <el-popover width="60" trigger="click">             <el-checkbox-group v-model=&

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

    目录 vue table表格控制下拉框的显示隐藏 vue下拉框清空 总结 vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 平时 点击 失去焦点后变化平时的显示 <vxe-table-column align="center" title="类型" width="270" style="height:40px;" field="collectio

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • Vue使用枚举类型实现HTML下拉框步骤详解

    下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

  • BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • 解决Extjs下拉框不显示的问题

    问题描述: 一个父容器也是window的window下的comboBox在页面中点击无效,但是在控制台中查看它的store却是有值的,问题在于没有显示. 页面: 控制台调试: 解决方案: 监听下拉(expand)事件,让下拉的dom堆叠顺序(z-index)置前(设为10000): listeners:{ expand:function(){ this.list.dom.style.zIndex = 10000; } }, 以上所述是小编给大家介绍的解决Extjs下拉框不显示的问题,希望对大家有

  • 基于Ajax实现下拉框联动显示数据

    公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q

  • layui固定下拉框的显示条数(有滚动条)的方法

    在css中加入下面代码: <style> .layui-form-select dl { max-height:200px; } </style> 以上这篇layui固定下拉框的显示条数(有滚动条)的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决JavaScript layui 下拉框不显示的问题

    初学layui时会遇到 layui的下拉框总是显示不出来 代码没问题但是 页面就是不显示下拉框 复制下面js代码 layui.use('form', function(){ var form = layui.form; form.render(); }); 以上这篇解决JavaScript layui 下拉框不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue组件实践之可搜索下拉框功能

    之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 DROPDOWN.VUE <template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemli

  • JavaScript实现下拉菜单的显示隐藏

    本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码,供大家参考,具体内容如下 有时需要这种页面效果: 鼠标移动到元素上面时,实现下拉菜单 鼠标移开元素后,下拉菜单不见了 实现思路 1.一个盒子里包含上下两部分,下面部分为子菜单,先设置为隐藏:display: none; 2.当鼠标移动到盒子上:触发事件- - -onmouseover ,js设置下面部分子菜单的display值为- - -block,使子菜单显示 3.鼠标移开盒子:触发事件- - -onmouseout ,j

随机推荐