封装el-table 可搜索字段，点击行可勾选，搜索字段否选不消失

hahah1234111111

已于 2023-03-14 09:55:52 修改

阅读量252

点赞数

分类专栏：组件封装 elementui 文章标签： vue.js 前端 javascript elementui

于 2023-02-28 18:53:45 首次发布

本文链接：https://blog.youkuaiyun.com/hahah1234111111/article/details/129267448

版权

组件封装同时被 2 个专栏收录

7 篇文章

订阅专栏

elementui

5 篇文章

订阅专栏

文章展示了如何在Vue.js应用中实现一个带有搜索输入框的表格组件。表格具有选择、点击和重复数据检查功能。handleSelectionChange函数用于检测选中项中是否有重复的fieldName，handleRowClick函数处理行点击事件，动态管理选中行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

//搜索输入框
        <el-input @input="searchFeildtable"
                  v-model="searchFeild"
                  placeholder="搜索字段"></el-input>
                  //表格
        <el-table ref="multipleTable"
                  :data="tableFeildCopy"
                  :select-on-indeterminate="true"
                  row-key="key"
                  @selection-change="handleSelectionChange"
                  @select="handleSelect"
                  @row-click="handleRowClick">
          <el-table-column type="selection"
                           align="center" />
          <el-table-column prop="fieldName"
                           label="字段名称">
          </el-table-column>
          <el-table-column prop="sourceColumnCname"
                           label="字段注释">
          </el-table-column>
          <el-table-column prop="tableName"
                           label="表名">
          </el-table-column>
          <el-table-column prop="sourceTableCname"
                           label="表注释">
          </el-table-column>

        </el-table>

handleSelectionChange函数是校验勾选中有字段重复的函数
handleSelect 赋值给勾选数组
handleRowClick 点击行勾选当前行

    handleSelectionChange(value) {
      // this.checkList ={}
      this.repetitionList = arrayFn.repetitionArray(this.checkTableList, 'fieldName')
      //   console.log(this.checkList, 'value')
      //   this.checkList = value
    },

    handleSelect(value) {
      this.checkTableList = value
    },

    // 选中字段表格
    handleRowClick(row, column, event) {
      console.log(row)
      if (this.checkTableList.findIndex((ele) => ele.key == row.key) != -1) {
        this.$refs.multipleTable.toggleRowSelection(row, false)
        arrayFn.deleteArray(
          this.checkTableList,
          this.checkTableList.findIndex((ele) => ele.key == row.key)
        )
      } else {
        this.checkTableList.push(row)
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
      console.log(this.checkTableList)
    },