# BaseTable

# 属性

# dataSource

  • 类型: Array | Object
  • 侦听属性
  • 描述: 表格的数据源,支持如下格式:
    一:[Feature]: Feature数组格式,使用此格式时不建议自己拼装,
      而是直接调动Feature组件的fromQueryResult或fromGeoJSON方法返回数据,
      建议如此使用:
      将Zondy.Service.QueryDocFeature.query方法查询到的result转为[Feature]
      let featureSet = Feature.fromQueryResult(result);
      将GEOJSON格式的JSON转为[Feature]
      let featureSet = Feature.fromGeoJSON(GEOJSON);
      格式:
      [
        {
          geometry:"",
          geometryType:"",
          attributes:"",
          style:"",
          FID:""
        },
        Feature2,
        Feature3
      ]
    二:Zondy: 使用Zondy的API做查询返回的格式
      {
        AttStruct:{...},
        SFEleArray:{...},
        TotalCount:""
      }
    
  • 参考:
    [Feature] in Feature
    Zondy in Zondy (opens new window)

# columns

  • 类型: Array
  • 默认值: []
  • 侦听属性
  • 描述: 表格的字段集合,格式如下:
       [
         {
           dataIndex: 'name',
           key: 'name',
           slots: { title: 'customTitle' },
           scopedSlots: { customRender: 'name' },
           },
           {
             title: 'Age',
             dataIndex: 'age',
             key: 'age',
           },
           {
             title: 'Address',
             dataIndex: 'address',
             key: 'address',
           }
         }
       ]
    
  • 参考: AntDesign in AntDesign Vue table (opens new window)

# editable

  • 类型: Boolean
  • 默认值: true
  • 侦听属性ed
  • 描述: 是否启用表格编辑。

# pagination

  • 类型: Object
  • 侦听属性ed
  • 描述: 表格分页信息。
  {
    pageSize: 每页条数,
    total: 所有记录数,
  }

# 事件

# @edited

  • 描述: 表格的编辑完成事件
  • 返回值 { dataSource }
    dataSource 表格的所有数据

# @deleted

  • 描述: 删除一条数据事件
  • 返回值 { record }
    record 被删除的一条数据

# @click

  • 描述: 单击单元格事件
  • 返回值 { record,columnKey }
    record 被点击的一行数据
    columnKey 被点击的单元格所在的列名

# @doubleClick@doubleclick

  • 描述: 双击单元格事件
  • 返回值 { rowIndex,columnKey,value,record }
    rowIndex 行号,从0开始
    columnKey 列名
    value 单元格数据
    record 一行的数据

# @selected

  • 描述: 多选框中,选择一行事件
  • 返回值 { record,selectData,selected }
    record 被选择的一行数据
    selectData 已选的所有数据
    selected 是否选中该行

# @selectAll@selectall

  • 描述: 多选框中,算中一页中的所有数据事件
  • 返回值 { selectData,selected }
    selectData 已选的所有数据
    selected 是否全选

# @pageChanged@pagechanged

  • 描述: 分页点击事件
  • 返回值 { pagination,sorter }
    pagination 分页信息
    sorter 排序信息

# @sorted

  • 描述: 排序事件
  • 返回值 { sorter,pagination }
    sorter 排序信息
    pagination 分页信息

# @fullScreen@fullscreen

  • 描述: 全屏事件
  • 返回值 { pagination,sorter }
    pagination 分页信息,其中的pageSize为铺满全屏的数据条数
    sorter 排序信息

# @originScreen@originscreen

  • 描述: 还原全屏事件
  • 返回值 { pagination,sorter }
    pagination 分页信息
    sorter 排序信息

# 示例

<template>
  <mapbox-map
    class="main"
    :accessToken="accessToken"
    :mapStyle="mapStyle"
    :zoom="mapZoom"
    :center="outerCenter"
    :crs="mapCrs"
  >
    <mapbox-igs-tdt-layer
      :layer="layer"
      :layerId="layerId"
      :sourceId="sourceId"
      :baseURL="baseURL"
      :token="token"
      :crs="mapCrs"
    >
    </mapbox-igs-tdt-layer>
  </mapbox-map>
</template>

<script>
import "@mapgis/mapbox-gl/dist/mapbox-gl.css";
import Mapbox from "@mapgis/mapbox-gl";
import { MapboxMap, MapboxIgsTdtLayer } from "@mapgis/webclient-vue-mapboxgl";

export default {
  components: {
    MapboxMap,
    MapboxIgsTdtLayer
  },
  data() {
    return {
      accessToken:
        "pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA", // 使用mapbox样式需要的秘钥
      mapStyle: "mapbox://styles/mapbox/light-v9", // 地图样式
      mapZoom: 3, // 地图初始化级数
      outerCenter: [130, 30], // 地图显示中心
      mapCrs: "EPSG:4326",

      layerId: "igsLayer_layerId",
      sourceId: "igsLayer_sourceId",
      layer: {}, // 图层配置信息
      baseURL: "http://t2.tianditu.gov.cn/vec_c/wmts", // 请求基地址
      token: "2ddaabf906d4b5418aed0078e1657029" // 请求天地图的key值
    };
  },

  created() {
    // 在组件中使用mapbox-gl.js的脚本库功能
    this.mapbox = Mapbox;
  }
};
</script>

<style lang="css">
.main {
  height: 600px;
  width: 100%;
}
</style>