a-table及相关组件的使用

基础的渲染

 <a-table :dataSource="tableList" :columns="tableColumns"></a-table>

参数名	类型	说明
dataSource	数组	数据来源，数组中的每一个对象都是一行的数据
columns	数组	用来指定每一列的标题（表头）
bordered	布尔值	是否显示表格边框，默认为竖向的边框
pagination	布尔值	默认采用他的分页，如果觉得不好用可以自己写
rowKey	具有唯一性	给每一行一个特殊标记，不给同时没给key(每一列的特殊标记)浏览器会报错
rowClassName	函数	对行进行处理，function(record,index){}

<template>

  <div>

    <div class="box" style="width:600px;margin:50px">

      <a-table

        :dataSource="tableList"

        :columns="tableColumns"

        bordered

        :pagination="false"

        :rowClassName="rowClassName"

      >

        <template slot="selfDefineTitle">

          <span>修后的标题(姓名列)</span>

        </template>

        <template slot="dealAge" slot-scope="text, record, index">

          <!-- 默认有三个参数，text为传给该列每个单元格中的数据，record为每一行的数据，index为改行索引 -->

          <span>{{ index + '-' + '年龄为：' + text }}</span>

        </template>

      </a-table>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      tableList: [

        {

          id: 1,

          name: '张三',

          age: 20,

          hometown: '北京'

        },

        {

          id: 2,

          name: '李四',

          age: 20,

          hometown: '上海'

        },

        {

          id: 3,

          name: '王五',

          age: 23,

          hometown: '深圳'

        }

      ],

      tableColumns: [

        {

          title: '序号', // 每一列对应的标题

          dataIndex: 'id', // 每一列对应的数据源中的数据

          width: 30, // 每一列的宽度

          align: 'center' // 每一列的对齐方式,left/center/right

        },

        {

          //   title: '姓名',

          slots: {

            //   给每一列的表头（标题）进行处理

            title: 'selfDefineTitle'

          },

          dataIndex: 'name',

          width: 100

        },

        {

          title: '年龄',

          dataIndex: 'age',

          scopedSlots: {

            // 对表格中的该列数据进行处理

            customRender: 'dealAge'

          },

          width: 100

        },

        {

          title: '家庭住址',

          dataIndex: 'hometown',

          width: 100

        }

      ],

      rowClassName: (record, index) => {

        let rowClassName = 'green'

        if (index % 2 === 0) {

          rowClassName = 'blue'

        }

        return rowClassName

      }

    }

  }

}

</script>

<style>

.green {

  background: rgb(76, 196, 86);

}

.blue {

  background: rgb(34, 90, 211);

}

</style>

显示结果：

常见功能及效果：

表头文字处理

使用的是slots:{ title:“自己给插槽取个名字” }；同过具名插槽，在列当中slots给插槽取名字, 在对应插槽中定义标题的内容及样式

详情可间上面代码

表格文字处理

通过 scopedSlots { customRender:“自己取个名字” }，可在对应插槽内对该列进行处理

详情可间上面代码

隔行变色

 <a-table :rowClassName="addClassName"></a-table>

 addClassName: (record, index) => {

        let rowClassName = 'green'

        if (index % 2 === 0) {

          rowClassName = 'blue'

        }

        return rowClassName

      }

<style>

.green {

  background: rgb(76, 196, 86);

}

.blue {

  background: rgb(34, 90, 211);

}

</style>

分页

1 pagination设置为true的

2 利用 自己定义样式

我经常用的一个分页

 <div class="page">

        <a-pagination v-model="currentPage" :total="totalRecord"></a-pagination>

        <span class="total">共 {{ totalRecord }}条</span>

      </div>

筛选与排序

1 利用antd自带的表格筛选与排序，只能够对当前页的数据进行筛选与排序，意义不大，用得很少

2 利用请求来进行所有数据的排序

 <div class="page">

        <a-pagination v-model="currentPage" :total="totalRecord"></a-pagination>

        <span class="total">共 {{ totalRecord }}条</span>

      </div>

筛选与排序

1 利用antd自带的表格筛选与排序，只能够对当前页的数据进行筛选与排序，意义不大，用得很少

2 利用请求来进行所有数据的排序
自己定义筛选样式会可以到组件a-checkbox-group与a-checbox
a-checkbox-group

参数名	类型	说明
change	chage事件	当每个选项发生改变，他都会将目前被勾选的参数传递过来
value	数组	用来指定被选择的项，就是被选择项的数组，反过来在它绑定的数组中就会呈现打勾的状态

a-checbox 可作为a-checkbox-group的每一个选择项

参数名	类型	说明
value	字符串或数字	每一个选项绑定的值 ，一般会作为请求的参数

序号列

1 如果请求有返回序号，直接将dataIndex与之绑定
2 没有，自己定义; (当前页-1)*每页展示的条数+索引+1

render:()=>{ return (currentPage-1)*pageSize+index+1}