antd vue table控件的使用（一）

今天就讲讲Ant Design Vue下的控件----Table  表格

结合项目中的需求，看看如何配置table控件，展示列表数据，需求：

（1）数据量不大，不需要分页；

（2）带斑马纹，选中行的样式，以及表头样式；

（3）设置为紧凑型；

（4）带进度条；

（5）如何绑定列和数据；

模板中代码如下：

<a-table
        class="ant-table-striped"
        style="width: 100%; height: 100%"
        bordered="true"
        size="small"
        :columns="cols"
        :dataSource="dataTable"
        :scroll="{ x: srcollWidth, y: tableScrollY }"
        :loading="loading"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">        
      </a-table>

1. 不需要分页：绑定pagination为false；

2.带斑马纹：

(1) 先设置table的class="ant-table-striped",再绑定rowClassName的匿名函数。

(2)再设置css样式：

.ant-table-striped :deep(.table-striped td) {
  background-color: #eef4fa;
  border: 0;
  height: auto;
}

（3）选中行及表头的样式：

:deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
  background: rgba(250, 212, 46, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.03);
}
//选中行样式
:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
  color: #000;
  background-color: rgb(243, 207, 44);
}
:deep(.ant-table-container > .ant-table-header > table > thead > tr > th) {
  border-right: 1px solid #c5dbec;
  border-bottom: 1px solid #c5dbec;
  padding: 4px;
}

:deep(.ant-table-small > tr > th) {
  background-color: #e2eff7;
  font-weight: bold;
  font-size: 16px;
  color: #1f66cc;
}
:deep(.ant-table.ant-table-small .ant-table-tbody > tr > td) {
  padding: 5px;
}
:deep(.ant-table-thead > tr > th) {
  background-color: #e2eff7;
  font-weight: bold;
  font-size: 16px;
  color: #1f66cc;
}

3. size 设置为middle或small可为紧凑型。

4 loading设置带进度条。

5.绑定列和数据

（1）先声明

//表格设置
  const tableScrollY = '500px';
  const srcollWidth = '100%';
  const loading = ref(false);
  const cols = ref([
    {
      title: 'Name',
      dataIndex: 'itemName',
      key: 'itemName',
      ellipsis: true,
      align: 'center',
      width: '160px',
    },
    { title: 'Age', dataIndex: 'age' },
    { title: 'op', dataIndex: 'op', key: 'op' },
  ]);
  const dataTable = ref([]);

（2）再绑定列:columns="cols" 和 数据源 :dataSource="dataTable"

（3）api返回结果集：

loading.value = true;

apiQuery.then((res) => {//apiQuery:调api

    dataTable.value = res;

    loading.value = false;

      });