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

hahah1234111111

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

阅读量197

点赞数

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

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

本文链接：https://blog.csdn.net/hahah1234111111/article/details/129267448

版权

elementui 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

组件封装

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

//搜索输入框
        <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)
    },