ArcGIS API for JavaScript 之 FeatureTable导出excel导出选中记录 (二)

需求变更为只导出FeatureTable用户选中的记录，则需要记录勾选的记录，去掉勾选的时候去掉该条记录。如果都不选择的话则导出全部记录

数据定义：标题，映射的字段、数组等

  data: () => ({
    subLayers: [],
    fields: [],
    featureLayer: null,
    layerurl: null,
    featureLayers: [],
    featuretable: null,
    highlights: [],
    selectedFeature: null,
    id: null,
    featureLayerGroup: null,
    height: 'height:450px',
    ifyGraphic: null,
    filename: '',
    autoWidth: true,
    bookType: 'xlsx',
    excelList: [],
    dateArray: [],
    tHeaders: [],
    filterVals: [],
    excelTitle: '导出Excel'
  }),

1、加载featuretable
2、获取所有数据集
3、根据featuretable 的 selection-change 事件
一、增删导出的list
二、高亮/隐藏 选中的layers

    createFeatureTable (featureLayer) {
      var self = this
      this.mapview.when(() => {
        var tableDiv = document.getElementById('tableDiv')
        tableDiv.innerHTML = ''
        this.featureLayer = featureLayer
        this.featureLayer.title = '详情'
        this.featureLayer.outFields = ['*']
        axios.get(this.featureLayer.config.server_url + '?f=pjson').then(res => {
          console.log(res.data)
          var fields = res.data.fields
          this.setupTable(res.data)
          fields.map(val => {
            val.label = val.alias
            delete val.alias
            delete val.domain
          })
          if (fields !== undefined) {
            self.featuretable = new self.$esri.FeatureTable({
              layer: self.featureLayer,
              fieldConfigs: fields,
              container: document.getElementById('tableDiv')
            })
            var symbol = {
              type: 'simple-fill',
              color: [0, 255, 255, 0.25],
              style: 'solid',
              outline: {
                color: [0, 255, 255],
                width: 2
              }
            }
            self.excelList = []

            self.featuretable.on('selection-change', function (changes) {
            // 勾选
              changes.added.forEach(item => {
                self.excelList.push(item.feature.attributes)
              })
              
              // 取消勾选
              changes.removed.forEach(item => {
                let OBJECTID = item.feature.attributes.OBJECTID
                self.excelList = self.arrRemoveJson(self.excelList, 'OBJECTID', OBJECTID)
              })

              if (self.excelList.length > 0) {
                self.excelTitle = '导出选择数据'
              } else {
                self.excelTitle = '导出所有数据'
              }

              changes.removed.forEach(item => {
                self.mapview.graphics.remove(item.feature)
                self.highlights.find(data => {
                  return data.feature = item.feature
                })
              })

              changes.added.forEach(item => {
                const feature = item.feature
                self.highlights.push({
                  feature: feature
                })
                feature.symbol = symbol
                // console.log('highlights', self.highlights)
                self.mapview.graphics.add(feature)
                self.mapview.goTo(feature)
                if ((feature.attributes.OBJECTID !== self.id) && self.mapview.popup.visible) {
                  self.featuretable.deselectRows(self.selectedFeature)
                  self.popup.close()
                }
              })
            })
          }
        })
      })
    }

数组对象去重

//调用
// this.arrRemoveJson(this.excelList, 'OBJECTID', OBJECTID)
// 删除 excelList 中OBJECTID等于xxxx的元素

    arrRemoveJson (arr, attr, value) {
      if (!arr || arr.length === 0) {
        return ''
      }
      let newArr = arr.filter(function (item, index) {
        return item[attr] !== value
      })
      return newArr
    }

数组删掉某个元素

//      this.removeArray(this.filterVals, 'Shape')
//       this.removeArray(this.tHeaders, 'Shape')
// 删除shape这个元素

    removeArray (list, value) {
      let index = list.indexOf(value)
      if (index > -1) {
        list.splice(index, 1)
      }
      return list
    }

获取到数据集的处理

    setupTable (data) {
      this.dateArray = []
      this.tHeaders = []
      this.filterVals = []
      this.filename = data.name
      data.fields.forEach(element => {
        if (element.type && element.type === 'esriFieldTypeDate') {
          this.dateArray.push(element.name)
        }
        if (element.alias) {
          this.tHeaders.push(element.alias)
        }
        if (element.name) {
          this.filterVals.push(element.name)
        }
      })
      console.log('setupTable', this.tHeaders)
    }

效果如图