vue+elementui实现下拉表格多选和搜索功能

本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下

在elementui的基础上对下拉框和表格进行组合

template

<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="120px"
id="selecTable"
@click.native="closeup">
<el-select
 v-model="dataForm.processDefinitionId"
 placeholder="请选择"
 @change="handselect"
 ref="select"
 @click.native="deptogglePanel($event)"
 multiple
 collapse-tags
 size="medium">
  <el-option
  v-for="(item,index) in processDefinition"
  :key="index"
  :label="item.name"
  :value="item.id">
  </el-option>
 </el-select>
 <div v-if="showTree" class="treeDiv" ref="tableList">
  <el-input placeholder="搜索"
  v-model="ss"
  @input="handinput"
  size="medium">
  </el-input>
  <el-table
  @select="handleSelectClick"
  @row-click="handleRegionNodeClick"
  @selection-change="handleChange"
  ref="moviesTable" :data="memberList" border
  :row-key="getRowKeys"
  :cell-style="getCellStyle"
  :header-cell-style="getHeaderCellStyle"
  @select-all="selectAll">
   <el-table-column
   type="selection"
   header-align="center"
   align="center"
   :reserve-selection="true"
   width="50">
   </el-table-column>
   <el-table-column
   v-for="(item, index) in Columns"
   :key="index"
   :prop="item.prop"
   :label="item.label"
   :show-overflow-tooltip="true">
   </el-table-column>
 </el-table>
</div>
</el-form>

js

<script>
 export default {
  data() {
   return {
    ss: '',
    visible: false,
    isDisabled: false,
    dataForm: {
     termName: '', //项目名称
     processDefinitionId: []

    },
    dataRule: {
     processDefinitionId: [{
      required: true,
      message: '请选择文件档案',
      trigger: 'change'
     }],
     termName: [{
      required: true,
      message: '项目名称不能为空',
      trigger: 'blur'
     }],
    },
    arr: [],
    processDefinition: [], //流程模板下拉框
    memberList: [], // list
    showTree: false,
    Columns: [{
      prop: 'number',
      label: '文件编码'
     },
     {
      prop: 'name',
      label: '文件名称'
     },
     {
      prop: 'typename',
      label: '模板类型'
     },
     {
      prop: 'efilename',
      label: '文件类型'
     },
     {
      prop: 'version',
      label: '版本'
     },
    ],
    getRowKeys(row) {
     return row.id;
    },
    multipleSelection: [],
    isShowSelect: true
   }
  },
  created() {},
  mounted() {
  },
  watch: {
   isShowSelect(val) {
    // 隐藏select自带的下拉框
    this.$refs.select.blur();
   },
  },
  methods: {
   init() {
    this.$nextTick(() => {
     this.$refs['dataForm'].resetFields();
     this.isDisabled = false;
     this.arr = [];
     this.multipleSelection = [];
    }).then(() => {
     //档案室文件下拉框
     this.$axios.get("/term/getFileArchiveSelect").then((res) => {
      console.log('档案室文件下拉框:', res);
      if (res.data.code != 200) {
       this.memberList = []
      } else {
       this.processDefinition = res.data.page.list
       this.memberList = res.data.page.list//表格赋值
      }
     })
     if (!this.dataForm.id) {
      // 新增
      // this.menuListTreeSetCurrentNode()
     } else {
      this.$axios.get("/term/getTermDeatil/" + this.dataForm.id).then((res) => {
       console.log("项目详情:", res);
       if (res.data.code != 200) {
        // this.$message.error(res.data.msg)
       } else {
        let data = res.data.termResVO;
        if (data.fileArchiveIds != '') {
         this.dataForm.processDefinitionId = data.fileArchiveIds.split(',')
        } else {
         this.dataForm.processDefinitionId = []
        }
        this.multipleSelection = data.child;
        this.rowMultipleChecked(this.multipleSelection);
       }
      })
     }
    }).catch((error) => {
     console.log(error);
    });
   },
   // 表格css
   getCellStyle() {
    return "text-align:center;"
   },
   getHeaderCellStyle() {
    return "background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;"
   },
   // 点击input 阻止冒泡 控制table显示隐藏
   deptogglePanel(event) {
    this.isShowSelect = !this.isShowSelect;//隐藏select本来的下拉框
    event || (event = window.event)
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
    this.showTree ? this.tableHide() : this.tableShow()
   },
   //显示表格
   tableShow() {
    this.showTree = true
    document.addEventListener('click', this.tableHideList, false)
    this.rowMultipleChecked(this.multipleSelection);
   },
   //隐藏表格
   tableHide() {
    this.showTree = false
    document.addEventListener('click', this.tableHideList, false)
   },
   tableHideList(e) {
    if (this.$refs.tableList && !this.$refs.tableList.contains(e.target)) {
     this.tableHide()
    }
   },
   // 点击table节点
   handleRegionNodeClick(data) {
    this.showTree = true
   },
   // 多选
   handleSelectClick(data) {
    this.showTree = true
   },
   //全选
   selectAll(data) {
    this.showTree = true
   },
   // selection-change表格多选框变化事件
   handleChange(data) {//表格中选中的行
    this.arr = [];
    for (let i in data) {
     this.arr.push(data[i].id)
    }
    this.dataForm.processDefinitionId = this.arr;//select赋值
    this.multipleSelection = data; //勾选放在multipleSelection数组中
   },
   //表格多选框选中判断
   rowMultipleChecked(multipleSelection) {
    console.log(multipleSelection)
    if (multipleSelection != null) {
     for (let j = 0; j < multipleSelection.length; j++) {
      for (let i = 0; i < this.memberList.length; i++) {
       if (multipleSelection[j].id == this.memberList[i].id) {//如果在后端传来的值中id存在则选中多选框
        this.$nextTick(() => {//必写
         if (this.$refs.moviesTable != undefined) {
          this.$refs.moviesTable.toggleRowSelection(this.memberList[i], true);
         }
        })
       }
      }
     }
    }
   },
   //删除文件档案
   handselect(value) {//select和表格相关联
    let data = this.multipleSelection;
    let arr = [];
    if (value.length > 0) {//删除multipleSelection(选中的所有值)中的value
     for (let j = 0; j < data.length; j++) {
      if (value.indexOf(data[j].id) == -1) {
       data.splice(j, 1)
      }
     }
     this.multipleSelection = data
    } else {
     this.multipleSelection = [];
     data = [];
    }
    for (let s in data) {
     arr.push(data[s].id)
    }
    if (arr != null) {//需要判断那些值需要取消选中
     for (let i = 0; i < this.memberList.length; i++) {
      if (arr.indexOf(this.memberList[i].id) == -1) {
       this.$refs.moviesTable.toggleRowSelection(this.memberList[i], false);
      }
     }
    }
   },
   //搜索
   handinput() {
    console.log(this.ss);
    this.tableShow()
    this.$axios.get('/term/getFileArchiveSelect').then((res) => {
     console.log(res);
     if (res.data.code != 200) {} else {
      this.processDefinition = res.data.page.list
      this.memberList = res.data.page.list
      console.log(this.memberList)
      let resultData = this.memberList.filter(data => {
       if (data.number.indexOf(this.ss) != -1 || data.name.indexOf(this.ss) != -1 ||
        data.typename.indexOf(this.ss) != -1 || data.version.indexOf(this.ss) != -
        1 || data.efilename.indexOf(this.ss) != -1) { //可继续增加判断条件
        return true;
       }
      });
      this.memberList = resultData;
     }
    })
   },
   // 表单提交
   dataFormSubmit() {
    this.$refs['dataForm'].validate((valid) => {
     if (valid) {
      let url = this.dataForm.id ? '/term/updateTerm' : '/term/addTerm'
      if (this.dataForm.id == '') {
       this.isDisabled = true;
      }
      this.dataForm.id = this.dataForm.id || undefined;
      console.log(this.dataForm);
     }
    })
   },
  },
 }
</script>

css

<style>
 .applicaWord .el-upload-list__item .el-icon-close-tip {
  display: none !important;
 }
 .treeDiv {
  position: absolute;
  top: 52px;
  left: -1px;
  z-index: 1000;
  width: 100%;
  overflow: auto;
  max-height: 280px;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
  background: #FFFFFF;
 }

 .treeDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
 }

 .treeDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
 }

 .treeDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
 }

 .treeDiv .el-table {
  font-size: 14px;
 }

 .treeDiv .el-table /deep/ td {
  padding: 4px 0;
 }

 #selecTable .el-select {
  width: 100%;
 }

 #selecTable .el-input {
  width: 100%;
 }

 #kuan .el-form-item__content {
  width: 80%;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • vue+elementui实现下拉表格多选和搜索功能

    本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下 在elementui的基础上对下拉框和表格进行组合 template <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px&q

  • Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <

  • ui组件之input多选下拉实现方法(带有搜索功能)

    我的风格,先上效果图,如果大家感觉还不错,请参考实现代码. 废话不说 先看div层次结构 <!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class="col-xs-10" style="width:800px"> <!-- 表单label 添加文字提示 --> <label for="" class="label-control">全文检索<

  • elementUI实现下拉选项加多选框的示例代码

    目录 下拉加多选框 升级-添加全部选项 需求改版完善 因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框 效果如下图: 封装如下: <template> <div class="select-checked"> <!-- 下拉加多选框 --> <el-select v-model="value" multiple placeholder="请选择" :po

  • Vue实现下拉表格组件

    本文实例为大家分享了Vue实现下拉表格组件的具体代码,供大家参考,具体内容如下 <template>   <div>     <div class="select-table">       <el-form ref="verification" label-width="80px" :model="selectData" :rules="rules">  

  • 解决element-ui的下拉框有值却无法选中的情况

    问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中.(踩坑踩得莫名其妙) 代码段: <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options&

  • 关于下拉类型多选组件Vue-Treeselect(键名转换)

    目录 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 在一般项目中也可以使用 vue-treeselect下拉树 稍微注意点 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 1.支持嵌套选项的单选和多选 2.模糊匹配 3.异步搜索 4.延迟加载(仅在需要时加载深度选项的数据) 5.键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等) 6.丰富的选项和高度可定制的 7.支持 多种浏览器 它支持在vue项目中通过

  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能. 本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!).于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助. 这个 UI 元素将被用

随机推荐