# card-page 多行列表组件

# 基础用法

ykc-card-page 的基础用法。

基础用法

undefinedundefined

跳至

页共0条

每页

条

图文用法

undefinedundefined

跳至

页共0条

每页

条

<template>
  <div class="doc">
     <!-- 基础用法 -->
    <h3>基础用法</h3>
    <div class="doc-box">
      <ykc-card-page
        :data="data"
        :isHead="true"
        :isBorder="true"
        :rowNumber="3"
        :maxWidth="120"
        :titles="titles"
        :tags="tagsFunc"
        :btns="btns"
        :keys="keys"
        :rightInfo="rightInfo"
        pageTitleProp="userId"
        @item-btn-click="handleClick"></ykc-card-page>
    </div>
    <!-- 图文用法 -->
    <h3>图文用法</h3>
    <div class="doc-box">
      <ykc-card-page
        :data="data"
        :rowNumber="3"
        :maxWidth="120"
        :titles="titles"
        :tags="tagsFunc"
        :btns="btns"
        :keys="keys"
        :rightInfo="rightInfo"
        picUrl="pic"
        picTxt="id"
        pageTitleProp="userId"
        @item-btn-click="handleClick"></ykc-card-page>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            id: '1',
            userId: '充电单号：2002191212323234',
            name: '名字叫张三',
            pic: 'https://t7.baidu.com/it/u=1339919834,2913259343&fm=193&f=GIF',
            date: '2020-02-11 11:57',
            value1: '02191212323234',
            value2: '南京南站',
            value3: '苏A12334',
            tags: [
              {
                type: 'tt1',
                name: '已充电',
              },
              {
                type: 'tt2',
                name: '已充电',
              },
              {
                type: 'tt3',
                name: '已充电',
              },
            ],
          },
          {
            id: '2',
            userId: '充电单号：2002191212323234',
            name: '名字叫张三',
            pic: 'https://t7.baidu.com/it/u=920125907,315781891&fm=193&f=GIF',
            date: '2020-02-11 11:57',
            value1: '02191212323234',
            value2: '南京南站',
            value3: '苏A12334',
            tags: [
              {
                type: 'tt1',
                name: '已充电',
              },
              {
                type: 'tt2',
                name: '已充电',
              },
              {
                type: 'tt3',
                name: '已充电',
              },
              {
                type: 'tt4',
                name: '已充电',
              },
              {
                type: 'tt5',
                name: '已充电',
              },
            ],
          },
        ],
        titles: ['充电单号:2002191212323234'],
        rightInfo: [
          '2018-12-29 18:00:00 — 2018-12-29 18:00:00',
          // {
          //   label: '2021-10-11',
          //   value: '2021-10-12',
          // },
        ],
        btns: [
          {
            type: 'B1',
            text: '处理',
          },
          {
            type: 'B1',
            text: '详情',
          },
        ],
        keys: [
          {
            prop: 'value1',
            label: '充电卡号',
          },
          {
            prop: 'value2',
            label: '归属机构',
          },
          {
            prop: 'value3',
            label: '充电车辆',
          },
          {
            prop: 'value1',
            label: '充电卡号',
          },
          {
            prop: 'value2',
            label: '归属机构',
          },
          {
            prop: 'value3',
            label: '充电车辆',
          },
          {
            htmlFunc: row => `<span class="color-main">${row.id}</span> 元/度`,
            icon: 'ask',
            iconClick: row => {
              console.log('click');
              console.log(row);
            },
            label: '特殊行',
          },
        ],
      };
    },
    created() {},
    methods: {
      /**
       * 表头标签
       */
      tagsFunc(row) {
        const arr = [];
        row.tags.forEach(item => {
          arr.push({
            type: 'tt3',
            name: item.name,
          });
        });
        return arr;
      },
      /**
       * item按钮对应点击事件
       */
      handleClick(item, btn, rowIndex, btnIndex) {
        console.log('item', item);
        console.log('btn', btn);
        console.log('index', rowIndex);
        console.log('ind', btnIndex);
      },
    },
  };
</script>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
isHead	否	是否显示头部	Boolean	false/true	true
isBorder	否	是否显示边框	Boolean	false/true	true
bodyTagsKey	否	是否提示文字	String	无	无
rowNumber	否	子项展示行数	Number	无	3
data	是	数据源	Array	无	无
titles	是	卡片头组件title：titles 或 titlesFun(item)	Array,Function	无	无
tags	是	卡片头组件标签集合tags：tags 或 tagsFun(item)	Array,Function	无	无
rightInfo	是	卡片头组件右侧值rightInfo：rightInfo 或 rightInfoFun(item)	Array,Function	无	无
picUrl	否	左侧图片路径在data里的key	String	无	无
picTxt	否	左侧图片下值在data里的key	String	无	无
pageTitleProp	否	列表内部左上的蓝色标题在data里的key	String	无	无
keys	否	label对应的key	Array	无	无
btns	否	按钮的数据源	Array	无	无
widthArr	否	右侧宽度设置	Array	无	无

# Events

事件名称	说明	回调参数
item-btn-click	点击右侧按钮返回响应的参数	item(父项), btn(子项), rowIndex( 行数), btnIndex(列数)

← pagination card-page-box →