index.vue

<template>
  <el-table
    border
    :data="exportWarehouseList"
    style="">
    <el-table-column
      width="250px"
      label="始发地">
      <template  v-slot="{ row, column, $index }">
        <el-checkbox v-model="row.checked" @change="emit">{{ $l(row, 'title') }}</el-checkbox>
      </template>
    </el-table-column>
    <el-table-column
      prop="objectiveId"
      label="目的地">
      <template v-slot="{ row, column, $index }">
        <el-select v-model="row.objectiveIdArr" multiple placeholder="请选择" style="width:100%" @change="emit">
          <el-option
            v-for="item in importWarehouseList"
            :key="item.id"
            :label="$l(item, 'title')"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CustomerLineTable',
  props: {
    warehouseList: Array,
    importCityList: Array,
    value: Array,
    zhongPaoType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableData: [],
      importWarehouseList: [],
      exportWarehouseList: []
    }
  },
  mounted() {
    this.initLines()
  },
  methods: {
    initLines(){
      this.warehouseList.forEach(item => {
        if(item.tradeType == 2 || item.tradeType == 3){
          let oldItem = this.value.find(it => it.departureId == item.id)
          this.exportWarehouseList.push(Object.assign({}, item, {
            checked: !!oldItem,
            objectiveIdArr: oldItem ? oldItem.objectiveIds.split(',').map(item => +item) : []
          }))
        }
        if(item.tradeType == 1 || item.tradeType == 3){
          this.importWarehouseList.push(Object.assign({}, item))
        }
      })
    },
    getValue(){
      let arr = []
      this.exportWarehouseList.forEach(item => {
        if(item.checked){
          arr.push({
            objectiveIds: item.objectiveIdArr.join(','),
            departureId: item.id,
            zhongPaoType: this.zhongPaoType
          })
        }
      })
      return arr
    },
    emit(){
      this.$emit('input', this.getValue())
    }
  },
  watch: {
    value() {
      // this.freshTableData()
    },
    warehouseList() {
      this.initLines()
    }
  }
}
</script>

<style scoped>

</style>