表格

mapgis-base-table

属性

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>
  <mapgis-web-map crs="EPSG:4326" :center="[116.3909, 39.9148]" :zoom="8">
    <mapgis-rastertile-layer layerId="tdt" url="http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752" />
    <mapgis-igs-doc-layer :layerId="layerId" :sourceId="sourceId" :baseUrl="baseUrl"/>
    <mapgis-base-table
            :dataSource="dataSource"
            :pagination="pagination"
            :columns="columns"
            @pageChanged="pageChanged"
            @sorted="sorted"
            @selected="selected"
            @selectAll="selectAll"
            @delete="deleteRow"
            @exportData="exportData"
            @edited="edited"
            @fullScreen="fullScreen"
            @originScreen="originScreen"
    >
    </mapgis-base-table>
    <mapgis-feature-service @loaded="serviceLoaded" :url="serviceUrl"/>
  </mapgis-web-map>
</template>

<script>
import {MRFS} from '@mapgis/webclient-es6-service'
const {VFeature,SQLParameter}=MRFS
export default {
  name: "basetable2d",
  data(){
    return {
      layerId: "igs_layer_layerid",
      sourceId: "igs_layer_sourceid",
      baseUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
      service: '',
      columns: [],
      dataSource: [],
      pagination:{
        total:0,
        pageSize:10
      },
      serviceUrl: "http://develop.smaryun.com:6163/igs/rest/mrfs/docs/Hubei3857"
    }
  },
  mounted() {
  },
  methods:{
    //获取数据
    getData(type){
      //获取数据
      this.query(0,20,undefined,undefined,true,"zondy");
      // this.query(0,10,undefined,undefined,true,"Feature");
      // this.query(0,10,undefined,undefined,true,"Feature");
    },
    query(pageIndex,pagination,orderBy,isAsc,initial,type){
      let vm = this;
      let sql = new SQLParameter({
        layers: "1",
        where: '',
        pageIndex: pageIndex,
        pagination: pagination,
        orderBy: orderBy,
        isAsc: isAsc,
        IncludeGeometry: false
      })
      //zondy格式
      vm.service.$_queryBySQL(sql,function (result) {
        if(type === "zondy"){
          vm.dataSource = result;
        }else if(type === "Feature"){
          vm.dataSource = VFeature.fromQueryResult(result);
        }
        console.log("vm.dataSource",vm.dataSource);
        if(initial){
          vm.columns = [{
            title: "mpArea",
            key: "mpArea",
            checked: true
          },{
            title: "mpPerimeter",
            key: "mpPerimeter",
            width: 120,
            checked: true
          },{
            title: "mpLayer",
            key: "mpLayer",
            width: 120,
            checked: true
          }];
          vm.pagination.total = result.TotalCount;
        }
      },function () {})
    },
    //要素服务加载完毕事件
    serviceLoaded(service){
      this.service = service;
      console.log('service',service)
      this.getData('zondy');
    },
    //table加载完毕事件
    handleCreated(table){
      this.table = table;
    },
    //编辑完成事件
    edited(row){
      console.log("编辑完成",row);
    },
    deleteRow(OID,row){
      console.log(OID,row)
    },
    pageChanged(pagination,sorter){
      //   //默认降序
      //   let isAsc = false;
      //   if(sorter.order === "ascend"){
      //     isAsc = true;
      //   }else if(sorter.order === "") {
      //     sorter.columnKey = "";
      //   }
      //   // this.query(pagination.current - 1,pagination.pageSize,sorter.columnKey,isAsc,false,"zondy");
      //   this.query(pagination.current - 1,pagination.pageSize,sorter.columnKey,isAsc,false,"Feature");
    },
    sorted(sorter,pagination){
      //默认降序
      let isAsc = false;
      if(sorter.order === "ascend"){
        isAsc = true;
      }else if(sorter.order === "") {
        sorter.columnKey = "";
      }
      // this.query(pagination.current - 1,pagination.pageSize,sorter.columnKey,isAsc,false,"zondy");
      this.query(pagination.current - 1,pagination.pageSize,sorter.columnKey,isAsc,false,"Feature");
    },
    exportData(allData){
      //导出数据
      console.log("exportData",allData);
    },
    selected(row,selectRows){
      console.log("选择一行",row);
      console.log("已选择数据",selectRows);
    },
    selectAll(selectRows){
      console.log("已选择数据",selectRows);
    },
    fullScreen(){},
    originScreen(){}
  }
}
</script>
</script>