# card-page 多行列表组件

# 基础用法

ykc-card-page 的基础用法。

AA：电站名称

可用

APP不可用

标签签

日期：3689368988

ID：3689368988

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

AA：电站名称

可用

APP不可用

标签签

日期：345343

ID：345343

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

AA：电站名称

可用

APP不可用

标签签

日期：345343

ID：345343

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

AA：电站名称

可用

APP不可用

标签签

日期：345343

ID：345343

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

跳至

页共4条

每页

条

AA：电站名称

可用

APP不可用

标签签

日期：3689368988

可用

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

电站地址：

当前费率：

直流桩：

交流桩：

江苏南京南站充电站点2F

888.8800

电站地址：

当前费率：

直流桩：

江苏南京南站充电站点2F

888.8800

AA：电站名称

可用

APP不可用

标签签

日期：345343

可用

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

电站地址：

当前费率：

直流桩：

交流桩：

江苏南京南站充电站点2F

888.8800

电站地址：

当前费率：

直流桩：

江苏南京南站充电站点2F

888.8800

AA：电站名称

可用

APP不可用

标签签

日期：345343

可用

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

电站地址：

当前费率：

直流桩：

交流桩：

江苏南京南站充电站点2F

888.8800

电站地址：

当前费率：

直流桩：

江苏南京南站充电站点2F

888.8800

AA：电站名称

可用

APP不可用

标签签

日期：345343

可用

当前费率：

直流桩：

交流桩：

电站地址：

888.8800

江苏南京南站充电站点2F

电站地址：

当前费率：

直流桩：

交流桩：

江苏南京南站充电站点2F

888.8800

电站地址：

当前费率：

直流桩：

江苏南京南站充电站点2F

888.8800

跳至

页共4条

每页

条

<template>
  <div>
    <ykc-card-page
      :data="data"
      :head-left="headLeft"
      :head-tag="headTag"
      :head-right="headRight"
      :row-number="4"
      :info="info"
      :pics="pics"
      :btns="btns"
      :total="4"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></ykc-card-page>

    <ykc-card-page
      :data="data"
      :head-left="headLeft"
      :head-tag="headTag"
      :head-right="headRight"
      :sub-title="subTitle"
      :rowNumber="4"
      :info="info1"
      :widthArr="[50, 120, 120]"
      :btns="btns"
      :total="4"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></ykc-card-page>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        pageSize: 3,
        currentPage: 1,
        data: [
          {
            v1: '电站名称',
            v2: 'APP不可用',
            v3: '可用',
            v4: '标签签',
            v5: 'https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/1609122862891.png',
            v6: '3689368988',
            v7: '888.8800',
            v8: '8',
            v9: '88',
            v10: '江苏南京南站充电站点2F',
          },
        ],
        headLeft: {
          label: 'AA：',
          key: 'v1',
          // propFun: row => `<div style="color:red;">${row.v3}</div>`,
        },
        headTag: ['v3', 'v2', 'v4'],
        // headTag: [{ propFun: () => `dd` }, { propFun: () => 'bb' }],
        headRight: {
          label: '日期：',
          key: 'v6',
        },
        subTitle: {
          label: '淡淡的：',
          key: 'v2',
          propFun: row => row.v3,
        },
        info: [
          {
            label: '当前费率：',
            key: 'v7',
          },
          {
            label: '直流桩：',
            key: 'v8',
          },
          {
            label: '交流桩：',
            key: 'v9',
          },
          {
            label: '电站地址：',
            key: 'v10',
          },
        ],
        pics: {
          url: 'v5',
          key: 'v6',
          label: 'ID：',
        },
        btns: [
          {
            text: '新增',
            icon: 'ykc-icon-details',
          },
          {
            text: '编辑',
            icon: 'ykc-icon-pay',
          },
          {
            text: '详情',
            icon: 'ykc-icon-pay',
          },
        ],
        info1: [
          {
            label: '当前费率：',
            key: 'v7',
          },
          {
            label: '直流桩：',
            key: 'v8',
          },
          {
            label: '交流桩：',
            key: 'v9',
          },
          {
            label: '电站地址：',
            key: 'v10',
          },
          {
            label: '电站地址：',
            key: 'v10',
          },
          {
            label: '当前费率：',
            key: 'v7',
          },
          {
            label: '直流桩：',
            key: 'v8',
          },
          {
            label: '交流桩：',
            key: 'v9',
          },
          {
            label: '电站地址：',
            key: 'v10',
          },
          {
            label: '电站地址：',
            key: 'v10',
          },
          {
            label: '当前费率：',
            key: 'v7',
          },
          {
            label: '直流桩：',
            key: 'v8',
          },
        ],
      };
    },
    created() {
      for (let i = 0; i < 3; i++) {
        this.data.push({
          v1: '电站名称',
          v2: 'APP不可用',
          v3: '可用',
          v4: '标签签',
          v5: 'https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/1635746693057.png',
          v6: '345343',
          v7: '888.8800',
          v8: '8',
          v9: '88',
          v10: '江苏南京南站充电站点2F',
        });
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(val);
      },
      handleCurrentChange(val) {
        console.log(val);
      },
    },
  };
</script>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
data	是	数据源	Array	无	无
headLeft	是	头部左边信息（label：标题名称，可无；key：内容对应的 key；propFun(row)：自定义 v-html，row 为当前行数据）	Object	无	无
headRight	否	头部右边信息（label：标题名称，可无；key：内容对应的 key；propFun(row)：自定义 v-html，row 为当前行数据}）	Object	无	无
headTag	否	头部标签信息（[key1,key2,...]：内容对应的 key or [{propFun:()}]:自定义标签内容）	Array	无	无
subTitle	否	副标题信息（label：标题名称，可无；key：内容对应的 key；propFun(row)：自定义 v-html，row 为当前行数据）	Object	无	无
rowNumber	否	每一列几行	Number	无	3
info	是	列表列内容（label：标题名称；key：内容对应的 key；unit：单位；propFun(row)：自定义 v-html，row 为当前行数据）	Array	无	无
pics	否	图片列（label：图片下面文字的标题名称，可无；key：图片下面文字的内容对应，可无；url：图片地址）	Object	无	无
btns	否	按钮数据源（text：按钮文字；icon：按钮图标）	Array	无	无
widthArr	否	每列宽度	Array	无	无
page-size	否	每页显示条目个数，支持 `.sync` 修饰符	number	无	10
current-page	否	当前页数，支持 `.sync` 修饰符	number	无	1
total	否	总条目数	number	无	0

# Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
item-btn-click	按钮点击触发	行数据:item; 按钮数据:btn; 行下标：rowIndex; 按钮的索引即操作里面的按钮第 ind 个：btnIndex

← card-page button →