YKC UI

# detail

# 基础用法

ykc-detail 的两列或以上展示，需要<div class="flexConent"></div>配合使用

详情标题
测试标签
芝巧互联测试电站222号
详情
江苏省南京市江宁区 新城科技园
芝巧测试
地上电站
无停车费
全天开放 下载
备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
全天开放
详情标题
芝巧互联测试电站222号
江苏省南京市江宁区 新城科技园
江苏省南京市江宁区 新城科技园
全天开放 下载
备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
全天开放 
<template>
  <div class="flexConent">
      <ykc-detail
        :titles="['详情标题']"
        :tags="[{ type: 'tt1', name: '测试标签' }]"
        :className="'left'">
        <div slot="cvBody">
          <div class="form-detail">
            <ykc-form :label-position="'left'" label-width="118px">
              <ykc-detail-item
                class="item-main-color"
                :label="'充电站名:'"
                :tagText="'详情'"
                @tagClick="handleTagClick">
                <span>芝巧互联测试电站222号</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'电站地址:'">
                <span>江苏省南京市江宁区 新城科技园</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'归属运营商:'">
                <span>芝巧测试</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'电站位置是哪里是是是:'">
                <span>地上电站</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'停车费用:'">
                <span>无停车费</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'开放时间说明:'">
                <span class="link">
                  全天开放
                  <a href="#" class="link">下载</a>
                </span>
              </ykc-detail-item>
              <ykc-detail-item :label="'营业执照:'">
                <img
                  class="form-item-img pointer"
                  src="https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/546C3EC6AB1F2152826637902115317302039931542852319053.jpg" />
                <img
                  class="form-item-img pointer"
                  src="https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/546C3EC6AB1F2152826637902115317302039931542852319053.jpg" />
              </ykc-detail-item>
              <ykc-detail-item :label="'备注说明:'">
                <span>
                  备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
                </span>
              </ykc-detail-item>
              <ykc-detail-item :label="'开放时间说明:'">
                <span style="color: #d0021b">全天开放</span>
              </ykc-detail-item>
            </ykc-form>
          </div>
        </div>
      </ykc-detail>
      <ykc-detail :titles="['详情标题']" :className="'right'">
        <div slot="cvBody">
          <div class="form-detail">
            <ykc-form :label-position="'left'" label-width="100px">
              <ykc-detail-item class="item-main-color" :label="'充电站名:'">
                <span>芝巧互联测试电站222号</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'电站地址:'">
                <span>江苏省南京市江宁区 新城科技园</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'问号样式:'">
                <span>江苏省南京市江宁区 新城科技园</span>
              </ykc-detail-item>
              <ykc-detail-item :label="'开放时间说明:'">
                <span class="link">
                  全天开放
                  <a href="#" class="link">下载</a>
                </span>
              </ykc-detail-item>
              <ykc-detail-item :label="'营业执照:'">
                <img
                  class="form-item-img pointer"
                  src="https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/546C3EC6AB1F2152826637902115317302039931542852319053.jpg" />
                <img
                  class="form-item-img pointer"
                  src="https://wtayvyzzmyanm9vx-car-test.oss-cn-hangzhou.aliyuncs.com/546C3EC6AB1F2152826637902115317302039931542852319053.jpg" />
              </ykc-detail-item>
              <ykc-detail-item :label="'备注说明:'">
                <span>
                  备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
                </span>
              </ykc-detail-item>
              <ykc-detail-item :label="'开放时间说明:'">
                <span style="color: #d0021b">全天开放</span>
              </ykc-detail-item>
            </ykc-form>
          </div>
        </div>
      </ykc-detail>
    </div>
</template>

<script>
  export default {
    methods: {
      handleTagClick() {
        console.log('tag');
      },
    },
  };
</script>
显示代码 复制代码

ykc-detail 的一列显示,需要<div class="onlineConent"></div>配合使用

详情标题
芝巧互联测试电站222号
江苏省南京市江宁区 新城科技园
江苏省南京市江宁区 新城科技园
芝巧测试
地上电站
无停车费
全天开放 下载
备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
全天开放 
<template>
  <div class="onlineConent">
    <ykc-detail :titles="['详情标题']" :className="'all'">
      <div slot="cvBody">
        <div class="form-detail">
          <ykc-form :label-position="'left'" label-width="118px">
            <ykc-detail-item :label="'充电站名:'">
              <span>芝巧互联测试电站222号</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'电站地址:'">
              <span>江苏省南京市江宁区 新城科技园</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'问号样式:'">
              <span>江苏省南京市江宁区 新城科技园</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'归属运营商:'">
              <span>芝巧测试</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'电站位置是哪里是是是:'">
              <span>地上电站</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'停车费用:'">
              <span>无停车费</span>
            </ykc-detail-item>
            <ykc-detail-item :label="'开放时间说明:'">
              <span class="link">
                全天开放
                <a href="#" class="link">下载</a>
              </span>
            </ykc-detail-item>
            <ykc-detail-item :label="'备注说明:'">
              <span>
                备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
              </span>
            </ykc-detail-item>
            <ykc-detail-item :label="'开放时间说明:'">
              <span style="color: #d0021b">全天开放</span>
            </ykc-detail-item>
          </ykc-form>
        </div>
      </div>
    </ykc-detail>
  </div>
</template>
显示代码 复制代码

ykc-detail 的无头部显示

电桩上送分时明细1

11

  • 1
  • 2
  • 3
  • 4
  • 100
跳至
页共1000条
每页
条
  <template>
    <div class="onlineConent">
      <ykc-detail :isHead="false" :tips="false" :className="'all'">
        <div slot="cvBody">
          <ykc-table
            :data="tableData"
            :columns="columns"
            title="电桩上送分时明细1"
            emptyText="emptyText"
            :tableConfig="tableConfig"
            :selectable="true"
            :operateable="true"
            operateWidth="auto"
            :operateButtons="operateButtons"
            :selectOnIndeterminate="false"
            @select="handleSelect"
            :headerButtons="headerButtons">
            <ykc-pagination
              slot="pagination"
              align="right"
              :total="total"
              :page-size.sync="pageSize"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"></ykc-pagination>
            <template slot="empty">empty slot</template>
          </ykc-table>
        </div>
      </ykc-detail>
    </div>
  </template>
  <script>
  const columns = new Array(6).fill(1).map((_, index) => ({
    label: `第${index + 1}列`,
    prop: `column_${index + 1}`,
    fixed: index === 5 ? 'right' : '',
    width: index === 5 ? '200' : '',
  }));
  const total = 1000;
  const tableData = new Array(total).fill(1).map((_, index) => {
    return columns.reduce((res, cur) => {
      const { prop } = cur;
      res[prop] = `row_${index + 1} ${prop}`;
      return res;
    }, {});
  });

  export default {
    data() {
      return {
        operateable: false,
        columns,
        total,
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        headerButtons: [
          {
            text: 'btn 1',
            id: '1',
            disabled: true,
          },
          {
            text: 'btn 2',
            id: '2',
            type: 'primary-plain',
          },
          {
            text: 'btn 3',
            id: '2',
            render() {
              return <ykc-button>11</ykc-button>;
            },
            handleClick: this.handleClick,
          },
          {
            text: 'btn 3',
            id: '2',
            render() {
              return <h1>11</h1>;
            },
            handleClick: this.handleClick,
          },
        ],
        operateButtons: [
          {
            text: 'btn 1',
            id: '1',
            handleClick: this.handleClick,
          },
          {
            text: 'btn 2',
            id: '2',
          },
          {
            text: 'btn 3',
            id: '3',
            render() {
              return <ykc-button type="text">11</ykc-button>;
            },
          },
        ],
        tableConfig: {
          height: '200',
          maxHeight: '500',
        },
      };
    },
    created() {
      const { currentPage, pageSize } = this;
      this.tableData = tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage);
    },
    methods: {
      handleSizeChange(val) {
        const { currentPage } = this;
        this.tableData = tableData.slice(val * (currentPage - 1), val * currentPage);
      },
      handleCurrentChange(val) {
        const { pageSize } = this;
        this.tableData = tableData.slice(pageSize * (val - 1), pageSize * val);
      },
      handleClick(...args) {
        console.log(args);
      },
      handleSelect(selection, row) {
        console.log(selection, row);
      },
    },
  };
</script>
显示代码 复制代码

# Attributes

参数 必填 说明 类型 可选值 默认值 备注
isHead 否 是否有头部 Boolean true/false true —
titles 否 头部标题 Array — [] —
tips 否 头部标题前面的标记点 Boolean true/false true —
tags 否 头部标题旁边的tag Array — [] —
rightInfo 否 头部右边文字 Array — [] —
className 否 判断页面样式 String — 'left','right','all' 一行两个卡片使用'left'或'right'，独占一行的使用'all'

# YkcDatilItem

参数 必填 说明 类型 可选值 默认值 备注
isTag 否 是否显示tag Boolean true/false true —
tagText 否 tag内容 String — '' —
labelWidth 否 label宽度 String — '' 字数*12+8

# Events

事件名称 说明 回调参数
tagClick tag点击事件 —
Last Updated: 2021/11/13 下午7:09:03

← tabs →