vue中antd的数据表格

最新推荐文章于 2024-05-17 11:40:43 发布

lsklike

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量303

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lsklike/article/details/126451904

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//antd数据表格在vue中的用法
<a-table
:columns="columns"
:dataSource="data"  //表格数据内容
@change="handleTableChange"
:pagination="{ pageSize: contentSize, total: pageTotal, showQuickJumper: true }" //表格分页
size="small"
>
<span slot="dataDate" slot-scope="text">{{ text ? moment(text).format('YYYY-MM-DD') : '-' }}</span> //表格一些数据的处理
<span slot="dataType" slot-scope="text">{{ text | dataTypeCode }}</span> //表格一些数据的处理

// 筛选也会触发这个事件
	//filters筛选条件
    handleTableChange(pagination, filters, sorter) {
        //可以打印下你需要的数据
      if(this.selectdata != null){
        console.log("这里调用了");
        // 页码变化是调用
          this.onLoading = true
          this.terminalPageData({
            meterId: this.concentratorListId,
            kw: '',
            dataTypes: this.selectdata,
            colTimeFrom: this.querytime,
            page: {
              page: pagination.current,
              size: 6
            }
          })
          setTimeout(() => {
            this.onLoading = false
          }, 500)
      }else{
        // 页码变化是调用
        this.onLoading = true
        this.terminalPageData({
          meterId: this.concentratorListId,
          kw: '',
          colTimeFrom: this.querytime,
          page: {
            page: pagination.current,
            size: 6
          }
        })
        setTimeout(() => {
          this.onLoading = false
        }, 500)
      }
    },

  //表格内容     
  myColumns() {
      // 表头
      const columns = [
          //在上面引用
          //import { indicationPhaseFlag, valtagePhaseFlag } from '@/common/selectCode'
         //scopedSlot这个是在一个js中定义的可以用这种方式去写一个筛选
          //电流相序标志
          //export const indicationPhaseFlag = [{ value: '1', text: 'A相电流' }, { value: '2', text: 'B相电流' }];
			//电压相序标志
			//export const valtagePhaseFlag = [{ value: '1', text: 'A相电压' }, { value: '2', text: 'B相电压' }];
        { dataIndex: 'macAddr', key: 'macAddr', title: '表编号' },
        { dataIndex: 'meterName', key: 'meterName', title: '表名称' },
        { title: '数据类型', dataIndex: 'dataType', scopedSlots: { customRender: 'dataType' }},
        { title: '数据日期', dataIndex: 'dataDate', key: 'dataDate', scopedSlots: { customRender: 'dataDate' } }, 
        { title: '数据时间', key: 'dataTime', dataIndex: 'dataTime' },
        { title: '电能示值', key: 'rv', dataIndex: 'rv' }
      ]
      this.columns = columns
    }