vue项目中 ant-design-vue组件的a-table简单使用

表格的使用，主要有几个属性的使用 columns 表头的配置 dataSource 表单内容的配置 一般都是结合ref使用 ，以便于请求到后端的数据以后，可以更好的对表格内容进行更多的操作，比如把后端的数据渲染到表格里面，或者把一些对表格里面的数据进行操作最后返回到后端。

然后就是与增删改查相关的一些操作，比如分页查询 ，就会用到表格的pagination属性，以及我们会设置表格渲染一页渲染几条的操作告诉后端，那么就会监听表格的change属性。 还有就是，比如对表格中的数据进行编辑或者删除或者新增，我们对操作栏的内容个性化定义，就会用到插槽 bodyCell

<a-table
    :columns="columns"
    :dataSource="dataSource"
    :pagination="pagination"
    @change="handleChanger"
  >
    <template #bodyCell="obj">
      <div v-if="obj.column.dataIndex === 'methods'">
        <a-button type="primary">连通测试</a-button>
      </div>
    </template>
    <template #emptyText>没有数据</template>
  </a-table>

在js代码中就会把上面绑定的属性进行配置

首先是columns    columns有两个属性 dataIndex 和 title  这里要注意dataIndex的值是要和后端给的文档里面对应的参数名要一致

const columns = [
  {
    dataIndex: 'datasourceName',
    title: '数据源名称'
  },
  {
    dataIndex: 'databaseType',
    title: '数据库类型'
  },
  {
    dataIndex: 'datasourceDescription',
    title: '数据源描述'
  },
  {
    dataIndex: 'connectionInfo',
    title: '连接信息'
  },
  {
    dataIndex: 'datasourceStatus',
    title: '应用状态'
  },
  {
    dataIndex: 'updateTime',
    title: '更新时间'
  },
  {
    dataIndex: 'methods',
    title: '操作'
  }
]

然后是dataSource 

//使用ref之前必须要引入
import { ref, reactive } from 'vue'
//引入后端获取表格内容的接口
import { getPageDatabase } from '../../services/getPage.js'
//将表格的内容属性定义成ref 便于对数据的操作
const dataSource = ref()
//异步的方法 
const getData = async () => {
//getPageDatabase里面的{}是前端传给后端的获取数据的要求 比如一共多少条，
//每页多少条

  const res = await getPageDatabase({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...formData.value
  })
//打印ref是为了确定数据被放在了那个层级
  console.log('res', res)
//将获取到的数据给到dataSource 因为是声明的ref 所以给值一定要.value
  dataSource.value = res.data.data.records
//将获取到的数据总数给到定义的pagination
  pagination.value.total = res.data.data.total
}

//一定要记得调用 获取数据的getData方法
getData()

pagination是关于分页的一些配置

const pagination = ref({
  current: 1,//当前在那一页
  pageSize: 34,//每页条数
  total: 0,//数据总数
  showSizeChanger: true,//分页条数选择器开关
  pageSizeOptions: ['2', '3', '4']//自定义分页条数
})

监听的change事件

//首先监听的change事件是有返回的，他是返回所有前端对页面的表格的查询操作
//然后以一个对象的形式接收的 所以在括号里面自定义了obj 这里的obj
//就是包含了所有前端对页面的表格的查询操作
//最后别忘了记得要重新调用一下数据 因为传入了新的查询条件 只有调用了才会更新数据
const handleChanger = (obj) => {
  pagination.value = obj
  getData()
}