vue2+TS，el-table表格多选的写法，加搜索条件

最新推荐文章于 2024-06-28 09:55:20 发布

行走的茶白

最新推荐文章于 2024-06-28 09:55:20 发布

阅读量301

点赞数 3

分类专栏： TS + Vue2 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/chabaimgg/article/details/139951377

版权

TS + Vue2 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.父组件引入子组件:

<discDriver :selectedIdList="selectedIdList" ref="discDriverRef"></discDriver>

selectedIdList 用于存储分配好的id，通过接口调取到的，引入子组件的时候需要传过去，以便后续的勾选回显

// 存储分配好的id
  private selectedIdList: any = []
  // 获取分配好的id数据
  private async initInfo(rowId) {
    let res = await GetDriverInfoByCustomerPC(rowId)
    this.selectedIdList = []
    // 获取分配好的id数据过滤出所有id，存放到新数组
    res.filter((item) => {
      this.selectedIdList.push(item.id)
    })
    console.log('tabledat分配的驾驶员数据查到保存后的id', this.selectedIdList)
  }

2. 通过$refs打开子组件的dialog：

打开子组件：

;(this.$refs.discDriverRef as discDriver).openCustomerChooseDialog(id)

3.子组件写法：

子组件的template：

<template>
  <el-dialog :close-on-click-modal="false" :show-close="false" title="分配驾驶员" :modal="false" :visible.sync="customerDialogVisible" top="0px" width="1400px" center destroy-on-close append-to-body>
    <div style="width: 100%; height: 430px">
      <el-form :inline="true" :model="customerQueryCondition">
        <!-- 名称-->
        <el-form-item label="姓名">
          <el-input clearable v-model="customerQueryCondition.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input clearable v-model="customerQueryCondition.personId" placeholder="请输入身份证"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSearch" class="seachBtn">
            <i class="el-icon-search"></i>
            {{ $t('i18n.search') }}
          </el-button>
          <!-- 重置 -->
          <el-button @click="searchReset" class="seachBtn">
            <i class="el-icon-refresh"></i>
            {{ $t('i18n.reset') }}
          </el-button>
        </el-form-item>
      </el-form>

      <el-table class="tables" :row-key="getRowKey" @selection-change="handleSelectionChange" size="small" header-row-class-name="monitorTable" stripe :data="tableData" width="100%" height="85%" highlight-current-row border ref="myELTable" @row-click="rowClick">

        <el-table-column type="selection" :reserve-selection="true" width="50px" align="center"></el-table-column>
        <!-- 客户编码-->
        <el-table-column prop="driverName" label="姓名" min-width="10.6%" align="center"></el-table-column>
        <!-- 客户名称 -->
        <el-table-column prop="idCard" label="身份证号" min-width="16.6%" align="center"></el-table-column>
        <!-- 客户地址 -->
        <el-table-column prop="phoneNumber" min-width="16.6%" label="手机号" align="center"></el-table-column>

        <el-table-column prop="state" min-width="16.6%" label="状态" align="center"></el-table-column>
        <el-table-column prop="byTime" min-width="16.6%" label="有效时间" align="center"></el-table-column>
        <el-table-column prop="checkTime" min-width="16.6%" label="审核时间" align="center"></el-table-column>
      </el-table>
    </div>
    <el-pagination :background="true" :current-page.sync="pageInfo.currentPage" :page-size="pageInfo.pageSize" layout="total,sizes, prev, pager, next, jumper, slot" :total="pageInfo.totalDataCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px;">
      <el-button style="margin-left: 5px" type="primary" @click="handleCurrentChange(pageInfo.currentPage)">跳转</el-button>
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button>
      <el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button>
    </div>
  </el-dialog>
</template>

接收父组件传来的 selectedIdList (里面存放了勾选的id，接口获取的) :

 // 接收传参
  @Prop({
    default: () => {
      return []
    }
  })
  selectedIdList: []

子组件的方法：openCustomerChooseDialog，查所有数据，然后根据传来的已经选择的id，对初始化数据进行勾选

 // 打开dialog
  public async openCustomerChooseDialog(id) {
    this.userId = id
    console.log('prop接受过来的selectedIdList', this.selectedIdList)
    this.pageInfo.currentPage = 1
    this.pageInfo.pageSize = 10
    //组件初始化，获取数据使用
    this.start_search2()
    this.customerDialogVisible = true
  } 


 private async start_search2() {
    let res = await getDriverAllInfo(this.pageInfo.currentPage, this.pageInfo.pageSize, '', '', '', '0')
    this.tableData = res.data
    this.$nextTick(() => {
    //多选框回显功能
      this.showChosen()
    })
    
    this.pageInfo.totalDataCount = res.totalDataCount
    this.customerDialogVisible = true
  
  }


  //多选框回显
  private showChosen() {
    // 遍历数据源
    this.tableData.forEach((row) => {
      // 遍历传来的分配好的id数据
      this.selectedIdList.forEach((id) => {
        // 如果传来的id和本页面的id相同
        if (row.id === id) {
          // 修改本页面数据源行的默认值为true
          this.$set(row, 'selected', true)
          // elementUI方法
          ;(this.$refs.myELTable as any).toggleRowSelection(row, true)
        }
      })
    })
  }

对打开的dialog的table表格进行操作的方法：

//:row-key="getRowKey"  绑定id
 private getRowKey(row) {
    return row.id
  }



//@selection-change="handleSelectionChange"
//勾选改变触发
private perSelectList: any = []
  private handleSelectionChange(curentSelectList) {
    //perSelectList 这个就是打开dialog的时候，勾选的数据的 数组集合

    //curentSelectList 会根据你勾选，或者取消选项的时候，获取勾选的数据集合，
      //勾两个，就有两个，勾三个，就有三个，是变化的

    //检查 curentSelectList 是否所有元素的 id 都不等于 某个v.id。如果所有都满足这个条件，every 函数返回 true，返回符合条件的v对象，否则，某个v 会被过滤掉。
     
    //就是取消勾选回显的 勾选数据时，会走下面，minus会是取消的那条数据，新增的时候minus为空
    
    // minus就是 用于从 this.perSelectList 数组中过滤出那些不在 curentSelectList 中的元素。

    let minus = this.perSelectList.filter((v) => {
      //每个V 对 e所有的选项做比较，如果所有 e的id 不等于 某个v的id，返回这个v对象
      return curentSelectList.every((e) => e.id != v.id)
    })
    //如果取消了，找到下标记，按下标删除 接收到的已勾选的id集合内的数据
    if (minus.length) {
      let findIndex = this.selectedIdList.findIndex((id) => {
        return id == minus[0].id
      })
      if (findIndex != -1) {
        this.selectedIdList.splice(findIndex, 1)
      }
    }
    this.perSelectList = curentSelectList
  }



// @row-click="rowClick" 点击行触发勾选
  private radio: any = ''
  private currentSelectedRow: any = {}

  // 选中某一行 
  private rowClick(row, e) {
    this.tableData.filter((item, index) => {
      if (e.id == item.id) this.radio = index
    })
    this.currentSelectedRow = e
    ;(this.$refs.myELTable as any).toggleRowSelection(row)
  }

4.所有数据处理好后点击确定

对数据在进行处理，然后调用接口，关闭dialog

 private async onSureChoose() {
    let data = []
    // localSelectedIdList 是当前勾选的数据的 id的 数据集合
    let localSelectedIdList = this.perSelectList.map((item) => {
      return item.id
    })
    // selectedIdList 是传来的接口查到的已勾选id集合，并且在选项改变时 处理过之后的
    //     这段代码定义了一个名为localSelectedIdList的新数组，它是从this.perSelectList数组中通过.map()方法创建的，目的是提取出每个元素的id属性
    // 接下来，有一个for循环遍历selectedIdList，这是从接口获取的已勾选ID集合，经过处理后的。
    // 对于selectedIdList中的每个已勾选ID（id），代码使用findIndex方法在localSelectedIdList中查找是否存在相同的ID。如果找不到（findIndex的结果为-1）
    // 说明这个ID还没有被添加到localSelectedIdList中，那么就将id推入localSelectedIdList。
    for (let index = 0; index < this.selectedIdList.length; index++) {
      let id = this.selectedIdList[index]
      //本页面勾选的数据id集合 找到匹配的第一个索引
      let findIndex = localSelectedIdList.findIndex((localId) => {
        return localId == id
      })
      if (findIndex == -1) {
        localSelectedIdList.push(id)
      }
    }
    for (let index = 0; index < localSelectedIdList.length; index++) {
      let id = localSelectedIdList[index]
      data.push({
        customerId: this.userId,
        driverId: id
      })
    }
    ;(this.$refs.myELTable as any).clearSelection()
    // debugger
    try {
      console.log('data',data)
      await AddCustomerAndDriver(data)
    } catch (error) {
      this.$message.success('分配驾驶员失败')
      return
    }
    // console.log('分配的res res', res)
    // if (res) {
    this.$message.success('分配驾驶员成功')
    this.customerDialogVisible = false
    // } else {
    //   this.$message.error('分配客户失败')
    // }
    // this.onCancelChoose()
  }

行走的茶白

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue2+TS，el-table表格多选的写法，加搜索条件

子组件的方法：openCustomerChooseDialog，查所有数据，然后根据传来的已经选择的id，对初始化数据进行勾选。selectedIdList 用于存储分配好的id，通过接口调取到的，引入子组件的时候需要传过去，以便后续的勾选回显。对数据在进行处理，然后调用接口，关闭dialog。
复制链接

扫一扫

专栏目录