vue selection table多选传值默认选中

1,修改页面

 2,点击关联灯具数据框,弹出多选的dialog默认选中已选中数据

 父组件部分代码

// 表单  
   <el-dialog
      :title="title"
      :visible.sync="_visible"
      width="22%"
      :action-type="actionType"
      :close-on-click-modal="false"
      @opened="handleOpend"
      @close="handleClosed"
    >

      <el-form
        v-if="_visible"
        ref="pointFrom"
        :model="pointFrom"
        label-width="120px"
        label-position="left"
      >
        <el-col>
          <el-form-item label="点位编号:" prop="pointNum">
            <el-input v-model="pointFrom.pointNum" />
          </el-form-item>
          <el-form-item label="点位名称:" prop="pointName">
            <el-input v-model="pointFrom.pointName" />
          </el-form-item>
          <el-form-item label="坐标:" prop="lng">
            <span style="margin-right:10px;">{{ pointFrom.lng }},{{ pointFrom.lat }}</span>
            <el-button @click="showPickerDialog=true">拾取坐标</el-button>
          </el-form-item>
          <el-form-item label="关联报警柱">
            <el-select v-model="pointFrom.alarm.alarmName" clearable placeholder="请选择报警柱" @click.native="selectAlarm" @clear="clearAlarm" />
          </el-form-item>
          <el-form-item label="关联灯具">
            <el-select v-model="lightingDataNameList" multiple placeholder="请选择灯具" @click.native="selectLighting" @remove-tag="removeLightingTag" />
          </el-form-item>
          <el-form-item label="关联相机">
            <el-select v-model="videoSurveillanceNameList" multiple placeholder="请选择相机" @click.native="selectVideoSurveillance" @remove-tag="removeVideoSurveillanceTag" />
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClosed">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('pointFrom')"
        >确 定</el-button>
      </span>
    </el-dialog>


// 子组件  
<!-- 选择灯具 -->
    <select-Lighting
      :alarm-visible.sync="lightingVisible"
      :lighting-list.sync="lightingList"
      @lighting-data="lightingData"
    />

// 导入组件
import selectLighting from './select-lighting.vue'

export default {
 // 初始化页面
  components: {
    selectLighting
  },

// 相关参数
lightingVisible: false,
lightingDataNameList: [],
lightingList: [],

// 其他判断
  title() {
      switch (this.actionType) {
        case 'add':
          return '添加点位'
        case 'edit':
          return '修改点位'
        default:
          return ''
      }
    },

    _visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },

 methods: {
// 初始化数据
 handleOpend() {
      this.$refs['pointFrom'].clearValidate()
      this.lightingData(this.pointFrom.lightingList)
    },

  handleClosed() {
      this._visible = false
      this.lightingDataNameList = []
      this.lightingList = []
      this.videoSurveillanceNameList = []
      this.pointFrom.lightingList = []
    },

// 选择灯具
    selectLighting() {
      this.lightingVisible = true
    },

 // 清除灯具数据
    removeLightingTag(TagName) {
      this.lightingList.splice(this.lightingList.findIndex(item => item.lightingName === TagName), 1)
    },

  // 选择灯具数据
    lightingData(lightingData) {
      this.pointFrom.lightingList = []
      this.lightingDataNameList = []
      this.lightingList = []
      lightingData.map(item => {
        this.lightingDataNameList.push(item.lightingName)
        this.lightingList.push(item)
      })
    },

}

}

 子组件完整代码

/* 选择灯具 */
<template>
  <el-dialog
    :title="title"
    :visible.sync="_visible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    width="58%"
    append-to-body
    @closed="handleClosed"
    @open="handleOpend"
  >
    <!-- 搜索栏 -->
    <el-row>
      <el-form :inline="true" :model="searchMap">
        <el-form-item label="灯具编号:">
          <el-input v-model="searchMap.lightingNum" clearable size="mini" />
        </el-form-item>
        <el-form-item label="灯具名称:">
          <el-input v-model="searchMap.lightingName" size="mini" clearable />
        </el-form-item>
        <div style="float:right">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="onSearch"
          >搜索</el-button></div>
      </el-form>

    </el-row>
    <!-- 功能区 -->
    <el-table ref="lightingTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="selectSingle" @row-click="rowChange" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        label="序号"
        width="60"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        prop="lightingNum"
        label="灯具编号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="lightingName"
        label="灯具名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="lightingStatusName"
        label="灯具状态"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="坐标" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.lng }},{{ row.lat }}</span>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页条 -->
    <div class="footer-container">
      <div class="pagination-container">
        <el-pagination
          :current-page="searchMap.pageNum"
          :page-sizes="savedPageSizes"
          :page-size="savedPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClosed">取 消</el-button>
      <el-button @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

import { mapState } from 'vuex'
import { selectPage } from '@/api/alarm/lighting.js'
export default {
  name: 'SelectAlarm',
  props: ['alarmVisible', 'lightingList'],
  data() {
    return {
      tableData: [],
      searchMap: {
        lightingNum: null,
        lightingName: null,
        pageNum: 1,
        pageSize: null
      },
      total: 0,
      count: 0,
      queryLotObj: {},
      parkLotList: [],
      checkList: [],
      rows: []

    }
  },
  computed: {
    ...mapState({
      savedPageSize: state => state.page.tablePageSize,
      savedPageSizes: state => state.page.tablePageSizes,
      tableStyle: state => state.page.tableStyle
    }),
    title: {
      get() {
        return '可关联灯具'
      }
    },
    _visible: {
      get() {
        return this.alarmVisible
      },
      set(val) {
        this.$emit('update:alarmVisible', val)
      }
    }
  },
  created() {
    this.initData()
  },

  methods: {

    initData() {
      this.searchMap.pageSize = this.savedPageSize
      this.loadTable()
    },

    loadTable() {
      this.tableData = []
      this.count = 0
      selectPage(this.searchMap).then((res) => {
        res.items.map(item => {
          this.tableData.push(item)
        })
        this.total = res.total
      })
    },

    // 序号
    indexMethod(index) {
      index = (index + 1) + (this.searchMap.pageNum - 1) * this.searchMap.pageSize
      return index
    },

    handleOpend() {
      this.tableData = []
      this.count = 0
      selectPage(this.searchMap).then((res) => {
        res.items.map(item => {
          this.tableData.push(item)
          // 回显默认选中判断
          this.lightingList.map(lighting => {
            if (lighting.id === item.id) {
              this.$refs.lightingTable.toggleRowSelection(item, true)
            }
          })
        })
        this.total = res.total
      })
    },

    handleClosed() {
      this.checkList = []
      this.searchMap.pageNum = 1
      this._visible = false
    },

    // 选中发生变化
    handleSelectionChange(selection) {
      this.checkList = selection
    },

    // 当某一行被点击
    rowChange(row, column, event) {
      const selected = this.rows.length && this.rows.indexOf(row) !== -1
      this.checkList.push(row)
      this.$refs.lightingTable.toggleRowSelection(row, selected)
    },

    // 勾选Checkbox
    selectSingle(rows, row) {
      this.rows = rows
    },

    submit() {
      if (this.checkList == null || this.checkList.length < 0) {
        this.$message({
          type: 'warning',
          message: '请最少选择一条数据!'
        })
      } else {
        this.$emit('lighting-data', this.checkList)
        this._visible = false
      }
    },
    // 搜索按钮
    onSearch() {
      this.loadTable()
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.searchMap.pageSize = val
      this.$store.dispatch('setTablePageSize', val)
      this.loadTable()
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.searchMap.pageNum = val
      this.loadTable()
    }

  }

}

</script>

<style lang="scss">
.my-autocomplete {
  border: 1px solid #2181e3;
  li {
    color: #ffffff !important;
    border-bottom: 1px solid #cccccc;
      &:hover {
       background: #1B558B;
  }
  }

}
</style>

后端实体参考

点位

/**   
 * Copyright © 2021 eSunny Info. Tech Ltd. All rights reserved.
 * 
 * 功能描述：报警点位
 * @Package: com.byx.pingjiang.common 
 * @author: xing xing hao
 * @date: 2021年12月22日 下午3:44:16 
 */
package com.byx.pingjiang.common.entity;

import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinTable;
import javax.persistence.ManyToMany;
import javax.persistence.OneToOne;
import javax.persistence.Table;
import javax.persistence.JoinColumn;

import com.byx.pingjiang.common.entity.jpa.BaseEntity;
import com.byx.pingjiang.common.entity.jpa.VideoSurveillance;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import com.fasterxml.jackson.annotation.JsonProperty;

import lombok.Data;
import lombok.EqualsAndHashCode;

/**
 * @ClassName: Area
 * @Description:设备点位表
 * @author: xing xing hao
 * @date: 2021年12月22日 下午3:44:16
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Entity
@Table(name = "POINT")
public class Point extends BaseEntity {

	private static final long serialVersionUID = 1L;

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Integer id;

	/**
	 * 点位编号
	 */
	private String pointNum;

	/**
	 * 点位名称
	 */
	private String pointName;

	/**
	 * 经度(高德坐标系)
	 */
	private String lng;

	/**
	 * 纬度(高德坐标系)
	 */
	private String lat;

	/**
	 * 灯具
	 */
	@JsonProperty
	@ManyToMany
	@JoinTable(name = "POINT_LIGHTING", joinColumns = @JoinColumn(name = "POINT_ID"), inverseJoinColumns = @JoinColumn(name = "LIGHTING_ID"))
	private List<Lighting> LightingList;

	public void replaceLightingList(List<Lighting> LightingList) {
		this.LightingList.clear();
		if (LightingList != null) {
			this.LightingList.addAll(LightingList);
		}
	}

	/**
	 * 监控相机
	 */
	@JsonProperty
	@ManyToMany
	@JoinTable(name = "POINT_VIDEO", joinColumns = @JoinColumn(name = "POINT_ID"), inverseJoinColumns = @JoinColumn(name = "VIDEO_ID"))
	private List<VideoSurveillance> videoSurveillanceList;

	public void replacevideoSurveillanceList(List<VideoSurveillance> videoSurveillanceList) {
		this.videoSurveillanceList.clear();
		if (videoSurveillanceList != null) {
			this.videoSurveillanceList.addAll(videoSurveillanceList);
		}
	}

	/**
	 * 报警柱
	 */
	@JsonIgnoreProperties(value = "point", allowSetters = true)
	@OneToOne(mappedBy = "point", cascade = CascadeType.REFRESH, orphanRemoval = true)
	private Alarm alarm;

}

逻辑出来:

	/**
	 * 新增编辑
	 * 
	 * @param point
	 */
	@Transactional
	public void saveOrUpdate(Point point) {
		if (point.getId() != null) { // 修改
			Point dataBase = pointRepo.findById(point.getId()).get();
			Point p = new Point();
			BeanUtils.copyProperties(dataBase, p);
			pointRepo.save(p);


			// 关联灯具
			List<Lighting> pageLightingList = point.getLightingList(); // 页面点位信息

			dataBase.replaceLightingList(pageLightingList);
			pointRepo.save(dataBase);

		} else { // 添加
			pointRepo.save(point);
			Point dataBase = pointRepo.findById(point.getId()).get();

			// 关联灯具
			List<Lighting> pageLightingList = point.getLightingList(); // 页面点位信息

			// 关联灯具
			dataBase.setLightingList(pageLightingList);
			pointRepo.save(dataBase);
		}

	}