# # 表格组件

> mapgis-3d-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-scene style="height: 800px">
        <mapgis-3d-igs-m3d :url="url"> </mapgis-3d-igs-m3d>
        <mapgis-3d-table
          :dataSource="dataSource"
          :pagination="pagination"
          @pageChanged="pageChanged"
          @selectAll="selectAll"
          @fullScreen="fullScreen"
          @originScreen="originScreen"
          @edited="edited"
          @click="click"
          @deleted="deleted"
          @sorted="sorted"
          @selected="selected"
        ></mapgis-3d-table>
      </mapgis-web-scene>
    </template>

    <script>
    import { Mapgis3dTable, Mapgis3dIgsM3d } from "@mapgis/webclient-vue-cesium";

    export default {
      components: {
        Mapgis3dTable,
        Mapgis3dIgsM3d
      },
      data() {
        return {
          url: "http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D",
          dataSource: undefined,
          pagination: {
            total: 0,
            pageSize: 10
          }
        };
      },
      mounted() {
        this.getData();
      },
      methods: {
        getData() {
          let vm = this;
          let inter = setInterval(function() {
            if (Zondy.Catalog) {
              clearInterval(inter);
              vm.query("0", 10);
            }
          }, 20);
        },
        query(page, pageCount, orderField, isAsc) {
          let vm = this;
          //初始化参数对象
          let queryParam = new Zondy.Catalog.G3DMapDoc();
          //查询图层的URL路径
          queryParam.gdbp =
            "gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型";
          //设置查询结果结构
          queryParam.structs = {
            IncludeAttribute: true,
            IncludeGeometry: false,
            IncludeWebGraphic: false
          };
          //属性查询
          queryParam.where = "";
          //分页信息
          queryParam.page = page;
          queryParam.pageCount = pageCount;
          //服务器的ip
          queryParam.ip = "develop.smaryun.com";
          queryParam.port = "6163";
          //排序设置
          queryParam.orderField = orderField ? orderField : "";
          queryParam.isAsc = isAsc ? isAsc : false;
          //查询服务
          queryParam.GetFeature(
            function(result) {
              console.log("result", result);
              vm.dataSource = result;
              vm.pagination.total = result.TotalCount;
            },
            function(e) {
              console.log("e", e);
            }
          );
        },
        pageChanged(pagination, sorter) {
          //分页事件
          console.log("pageChanged", pagination);
          this.query(
            pagination.current - 1,
            pagination.pageSize,
            sorter.orderField,
            sorter.isAsc
          );
        },
        selectAll(selectData) {
          //全选事件
          console.log("selectAll", selectData);
        },
        selected(selectData, allDate) {
          //选择单个数据事件
          console.log("selected", selectData);
          console.log("allDate", allDate);
        },
        fullScreen(pagination, sorter) {
          //全屏事件
        },
        originScreen(pagination, sorter) {
          //还原屏幕事件
          this.pagination.pageSize = pagination.pageSize;
          this.query(
            pagination.current - 1,
            pagination.pageSize,
            sorter.orderField,
            sorter.isAsc
          );
        },
        edited(result) {
          //编辑完成事件
          console.log("edited", result);
        },
        click(result, key) {
          //单击事件
          console.log("click", result, key);
        },
        deleted(result) {
          //删除事件
          console.log("deleted", result);
        },
        sorted(sorter, pagination) {
          //排序事件
          this.query(
            pagination.current - 1,
            pagination.pageSize,
            sorter.orderField,
            sorter.isAsc
          );
        }
      }
    };
    </script>

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