table列表的弹窗下的多选框反选问题（人员筛选功能）

Baifu paste

已于 2022-11-17 09:29:48 修改

阅读量790

点赞数

分类专栏： javascript element vue 文章标签： javascript vue.js 前端

于 2022-08-04 15:10:31 首次发布

本文链接：https://blog.csdn.net/qq_28586135/article/details/126159722

版权

javascript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

33 篇文章 1 订阅

订阅专栏

element

21 篇文章 1 订阅

订阅专栏

本文档详述了一个项目中关于表格间人员筛选功能的实现，包括父级列表点击新增弹出人员筛选窗口，以及在A、B两个表格之间进行人员选择、删除和提交的操作。难点在于多选框回显状态的处理，解决方案是将所有数据返回前端并由前端处理分页，以简化回显数据的选择状态。此外，还详细展示了Btable列表中checkbox的单选、全选、添加和移除状态的实现代码。该功能对于前端表格交互和数据管理具有参考价值。

摘要由CSDN通过智能技术生成

项目即将完成，我想写一下总结，总结一些功能方便以后借阅，今天做的这个功能是table表格之间作人员筛选弹窗功能，父级列表点击新增，就会弹出人员筛选的弹窗。Atable列表是人员的总人数，Btable列表作为容器放你选的人员，可以删除，最后提交Btable的人员列表给父级列表。
1.此功能的难点就是回显是多选框选中状态，不好处理，不过已经在代码中标识。需要注意：弹窗的数据必须全部返给前端，前端自行分页，这样在修改时，需要处理回显数据的选择状态时，筛选已选择的数据比较容易处理。
2.在Btable列表，中手动写出checkbox单选、全选、添加、移除时的状态。
如下图：

父级列表：
在这里插入图片描述

人员筛选：
在这里插入图片描述
父级代码：

<template>
  <div>
		<el-button type="success" size="mini" @click="add()">新增</el-button>
    <el-table
      class="acceptorsTable"
      :data="currentPageData"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        headerAlign="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="姓名"
        width="400"
        headerAlign="center"
        align="center"
      >
        <template slot-scope="scopes">
          {{ scopes.row.name}}
        </template>
      </el-table-column>
      <el-table-column 
        label="操作"
        headerAlign="center"
        align="center"
      >
        <template slot-scope="scopes">
          <el-button
            size="mini"
            type="danger"
            @click="newHandleDelete(scopes.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <fruits ref="edit" @childClosed ="closed"></fruits>
	</div>
</template>
<script> 
  import fruits from './fruits'
  export default {
    components: {fruits},
    data(){
      return {
        ruleForm: {
          acceptors: [],
        },
        // 分页
        nowknowledgeint:[],
        pageSize: 10,
        pageSizes: [10, 20, 30, 50, 100], // select选项设置：条/页
        currentPage: 1,
        total: 0,
        currentPageData: [], // 当前页显示内容
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
      // 删除
      newHandleDelete(row) {
        this.nowknowledgeint.forEach((n, index) => {
          if (n.id == row.id) {
            this.nowknowledgeint.splice(index, 1);
          }
        });
      },
      add(command) {
        this.$refs.edit.open(true, {});
      },
      edit(row) {
        this.$refs.edit.open(false,row)
      },
      // 关闭
      closed(data){
        var acceptorsArray = []
        if(data.length > 0){
          data.forEach(value => {
            acceptorsArray.push(value)
          });
        }
        this.nowknowledgeint = acceptorsArray
        this.setCurrentPageData()
        console.log(this.nowknowledgeint)
      },
      // 分页
      // 设置当前页面数据，对数组操作的截取规则为[0~5],[5~10]...,
      setCurrentPageData() {
        let begin = (this.currentPage - 1) * this.pageSize
        let end = this.currentPage * this.pageSize
        this.currentPageData = this.nowknowledgeint.slice(
          begin,
          end
        )
      },
      handleSizeChange(val) {
        this.pageSize = val
        let begin = (this.currentPage - 1) * val
        let end = this.currentPage * val
        this.currentPageData = this.nowknowledgeint.slice(
          begin,
          end
        )
      },
      handleCurrentChange(val) {
        if (this.currentPage == this.totalPage) return
        this.currentPage = val
        this.setCurrentPageData()
      },
	  },
  }
</script>
<style type="text/css">
</style>

人员筛选：

<template>
  <div>
    <el-dialog
        :visible.sync="outInnerVisible"
        append-to-body
        width="70%"
        class="groupEdit"
        style="overflow:auto;"
        @close ='close'
    >
      <el-form
        :model="newRuleForm"
        ref="newRuleForm"
        label-width="100px"
        class="send"
      >
        <div style="width:296px; padding:8px 0px;">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            clearable
            v-model="inputValue"
            @keyup.enter.native="searchEnterFun"
          >
            <el-button slot="append" @click="serch()">查询</el-button>
          </el-input>
        </div>
        <div class="clearfix">
          <div class="transferBefore fl">
              <el-table
                class="transferBeforeTbale"
                ref="multipleTable"
                :data="newRuleForm.tableDataList"
                tooltip-effect="dark"
                style="width: 100%"
                @select="handleSelect"
                @select-all="handleSelectAll"
                >
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  headerAlign="center"
                  align="center"
                  :index="indexMethod"
                >
                </el-table-column>
                <el-table-column
                  label="姓名"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">{{ scope.row.name}}</template>
                </el-table-column>
              </el-table>
              <div class="contactsyncPage" style="padding:8px 0px;">
                  <el-pagination
                  :pager-count="5"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Number(currentPage+1)"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, prev, pager, next, jumper"
                  :total="total">
                  </el-pagination>
              </div>
          </div>
          <div class="transferAfter fr">
              <el-table
                class="transferAfterTable"
                :data="newRuleForm.newTableDataList"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  headerAlign="center"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  label="姓名"
                  headerAlign="center"
                  align="center"
                  >
                  <template slot-scope="scope">{{ scope.row.name}}</template>
                </el-table-column>
                <el-table-column 
                  label="操作"
                  headerAlign="center"
                  align="center"
                  width="60"
                  >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
      </el-form>
      <div class="submitButton">
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
	</div>
</template>
<script>
  export default {
    data(){
      return{
        outInnerVisible: false,
        // 查询
        inputValue:'',
        // table
        newRuleForm:{
          tableDataList: [],
          newTableDataList:[],
        },
        ids: [], // 选中的数据id数组
        newRows:[],
        // 分页
        pageSize: 10,
        pageSizes: [10, 20, 30, 50, 100], // select选项设置：条/页
        currentPage: 0,
        total: 0,
      }
    },
    computed: {
    },
    created(){
      this.tableData()
	  },
    mounted(){
      
    },
    methods: {
      // 数据回显
      open(isEdit, obj){
        this.outInnerVisible = true
        if(!isEdit){
          // 修改
          this.inputValue = "";
          this.pageSize=10;
          this.currentPage=0;
          this.newRuleForm.tableDataList = [];
          this.$nextTick(()=>{
            this.newRuleForm.newTableDataList =  JSON.parse(JSON.stringify(obj))
          })
          this.tableData(this.currentPage,this.pageSize,this.inputValue)
        }else{
          // 新增
          this.inputValue = "";
          this.pageSize=10;
          this.currentPage=0;
          this.newRuleForm.tableDataList = []
          this.tableData(this.currentPage,this.pageSize,this.inputValue)
        }
      },
      // 查询
      searchEnterFun(e) {
        var keyCode = window.event ? e.keyCode : e.which;
        if (keyCode == 13) {
          this.serch();
        }
      },
      serch(){
        this.currentPage = 0
        this.tableData(this.currentPage,this.pageSize,this.inputValue)
      },
      //获取人员
      tableData(pageIndex,pageSize,userName) {
        this.$axios.post("接口", {post:'参数'}).then((res) => {
          this.total = res.data.totalCount; //总页数
          this.newRuleForm.tableDataList = res.data.list; //内容
          // 编辑时，如果该页存在选中的数据，则选中（重点）
          if (this.newRuleForm.newTableDataList.length) {
            this.toggleSelection(this.newRuleForm.newTableDataList);
          }
        });
      },
      // 单选
      handleSelect(selection, row) {
        let allRows = selection.filter((item) => !!item);
        if (allRows.find(item => item.userId === row.userId)) {
          this.addRows([row]);
        } else {
          this.removeRows([row]);
        }
      },
      // 全选
      handleSelectAll(selection) {
        if (selection.length > 1){
          this.addRows(this.newRuleForm.tableDataList);
        } else {
          this.removeRows(this.newRuleForm.tableDataList);
        }
      },
      // 添加
      addRows(rows) {
        for (const key of rows){
          if (!this.newRuleForm.newTableDataList.find((item) => item.id === key.id)) {
            this.$nextTick(()=>{
              this.newRuleForm.newTableDataList.push(key);
            })
          }
        }
      },
      // 移除
      removeRows(rows) {
        if (this.newRuleForm.newTableDataList.length > 0){
          for (const key of rows) {
            this.$nextTick(()=>{
              this.newRuleForm.newTableDataList = this.newRuleForm.newTableDataList.filter((item) => item.id !== key.id);
            }) 
          }
        }
      },
      // 如果该页存在选中的数据，则选中（难点）
      toggleSelection(rows){
        if (rows) {
          rows.forEach(row => {
            this.$nextTick(() => {
              const checked = this.newRuleForm.tableDataList.find(tableRow => tableRow.id === row.id);
              this.$refs.multipleTable.toggleRowSelection(checked, true);
            });
          });
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.newRuleForm.tableDataList, false);
          this.removeRows(this.newRuleForm.tableDataList);
        }
      },
      // 删除时调用
      handleDelete(row) {
        this.$nextTick(x=>{
          this.$refs.multipleTable.toggleRowSelection(row,false);
          this.$refs.multipleTable.toggleRowSelection(
            this.newRuleForm.tableDataList.find( // 这是我弹框表格的数据
              item => row.id === item.id
            ),
            false
          );
          this.newRuleForm.newTableDataList.forEach((n, index) => {
            if (n.id === row.id) {
              this.newRuleForm.newTableDataList.splice(index, 1);
            }
          });
        })
      },
      // 序号
      indexMethod(index) {
        return index + 1 + this.currentPage * this.pageSize
      },
      // 提交
      onSubmit(){
        this.outInnerVisible = false
        // 传给父级
        this.$emit('childClosed',this.newRuleForm.newTableDataList);
      },
      // 取消
      cancel() {
        this.outInnerVisible = false
        this.newRuleForm.newTableDataList = [];
      },
      // 关闭
      close(){
        this.newRuleForm.newTableDataList = [];
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 0
        this.tableData(this.currentPage,this.pageSize,this.inputValue)
        this.handleCurrentChange(1)
      },
      handleCurrentChange(val) {
        this.$nextTick(()=>{
          this.currentPage = val-1
          this.tableData(this.currentPage,this.pageSize,this.inputValue)
        })
      } 
    },
  }
</script>
<style scoped>
.clear {
    clear: both;
}

.clearfix:after {
    content: ".";
    height: 0px;
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix {
    zoom: 1;
}
.fl {
    float: left;
}
.fr{
  float:right;
}
.transferBefore{
  width: 48%;
}
.transferBeforeTbale{
  border-top:solid 1px #EBEEF5;
  border-left:solid 1px #EBEEF5;
  border-right:solid 1px #EBEEF5;
}
.transferAfter{
  width:48%;
}
.transferAfterTable{
  border-top:solid 1px #EBEEF5;
  border-left:solid 1px #EBEEF5;
  border-right:solid 1px #EBEEF5;
  height:530px;
  overflow-y: auto;
}
.submitButton{
  padding-top:10px ;
  text-align: right;
}
</style>