a-table及相关组件的使用

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 利用请求来进行所有数据的排序，自己定义筛选样式会可以到组件a-checkbox-group与a-checbox

 <div class="page">

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

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

      </div>

a-checkbox-group

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

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

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

序号列

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

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

----------------------------------------------------------分割线--------------------------------------------------------------

TQMQE105班组长审批小节：

一、

问题：查样品编码时，前端方法正常调用，但是在调用后端方法时，无论如何这个方法都不能调用，其他方法可以调用；

解决：使用subscribe关键字来触发调用后端方法；

 二、

标签页与表格分开写法；

三、标签页与表格

1、

问题：使用原来的组件时标签页不显示panes={this.panes}，因为原来的标签页与表格是联系在一起的，要有表格才可以显示对应的标签，原来的标签也是写死的，因为数量不多；那样的话是伪动态：如果标签和表格分开是话，标签不显示；不分开的话，不知道有多少的标签，其次不知道要有多少个表格；（标签是自显示的）；

解决：换了个标签页的组件，可以将标签页和表格分开来写；将查询到的标签页循环取出、显示；
2、

问题：原来的标签页只有切换的时候才可以触发方法；

解决：新组件有一个点击触发的方法--tabClick，在这里要写成on-tabClick才可以使用；

看一下后端返回来的数据格式（数组字符串）：

 

 

3、不要加不要加不要加slot；

 

4、

问题：不会获取选择的标签数据，拿到标签数据传给后端；

解决：写一个函数，来获取当前点击的标签数据，传给后端；

5、本来写了一个查编码完成函数，如果调用这个函数，这个函数需要传入参数，正好是查询到的编码数据，于是将查完的编码数据赋值给一个变量，再将这个变量作为这个查编码完成函数的参数传入。