@gdyfe/table

Installation

yarn add @gdyfe/table

npm install --save @gdyfe/table

Usage

import GdyTable from '@gdyfe/table'
import '@gdyfe/table/lib/gdy-table.css'
Vue.use(GdyTable)

Example

g-table

<!-- g-table -->
<g-table
  :config="config" 
  :list="list" 
  :pagination="pageOptions"
  @handleTableChange="handleTableChange"
>
  <template #action="text, record">
    <!-- 自定义。未配置dataIndex则text和record字段均为当前行所有数据，配置dataIndex则text为当前行dataIndex字段数据 -->
  </template>
</g-table>

atnd属性配置可参考antd配置

export default {
  data() {
    // 列表数据项
    list: [
      {
        id: 123,
        name: 'admin',
        status: 1,
        isShow: true,
        content: '内容'
      }
    ],
    config: [
      // 基本配置，列显示当前dataIndex字段信息
      {
        dataIndex: 'id', // antd属性。列数据在数据项中对应的 key
        key: 'id', // antd属性。Vue 需要的 key,已经设置了唯一的 dataIndex，可以忽略这个属性
        title: '序号', // antd属性。列头显示文字
        width: 90 // antd属性。列宽度
      },
      // 最多显示两行，hover显示全信息
      {
        dataIndex: 'content',
        key: 'content',
        title: '举报内容',
        width: 90,
        textHover: true // 自定义属性，添加后当前列最多显示两行，提供hover显示全信息。若为链接则渲染为a标签。若设置customRender则此属性不生效
      },
      // 自定义显示内容，可获取当前设置daraIndex内容
      {
        dataIndex: 'status',
        key: 'status',
        title: '状态',
        customRender: status => { // antd属性
          if (status === 0) {
            // 自定义类。在customRender内添加g-table-text__orange等属性可获得标签样式
            return <span class="g-table-text__orange">{this.statusArr.filter(v => v.value === status)[0].label}</span>
          } else {
            return <span class="g-table-text__green">{this.statusArr.filter(v => v.value === status)[0].label}</span>
          }
        },
        width: 90
      },
      // 自定义配置字段信息，在模板中用插槽定义（下方用action定义customRender内容）
      {
        title: '操作',
        scopedSlots: { customRender: 'action' }, // antd属性
        width: 150
      }
    ],
    // 可参考antd配置
    pageOptions: {
      pageSize: 12,
      total: 0, // 动态
      page: 1, // 动态
      showQuickJumper: true, // 显示前往
      style: { float: 'none', textAlign: 'center' }
    }
  },
  method: {
    // 页数change回调
    handleTableChange(pagination, filters, sorter) {
      // pagination.current为当前页数
    }
  }
}

g-search

<g-search :config="config" @search="search"></g-search>

export default {
  data() {
    const reportTypeArr = [
      {
        label: '全部',
        value: -1
      },
      {
        label: '反动政治',
        value: 1
      },
      {
        label: '色情低俗',
        value: 2
      }
    ]
    // search配置项
    config: [
      {
        type: 'input', // input类型
        field: 'userId', // 对应form userId
        title: '用户id', // 对应label，不配置则不显示
        defaultValue: '', // 默认值
        placeholder: '请输入用户id',
        style: 'width: 144px' // 自定义样式
      },
      {
        type: 'datepicker',
        field: 'time',
        title: '选择时间',
        defaultValue: [],
        placeholder: '时间范围组件',
        style: 'width: 144px'
      },
      {
        type: 'select',
        field: 'reportType',
        title: '举报类型',
        placeholder: '',
        defaultValue: -1,
        selectOptions: reportTypeArr, // 选择项，包含label和value字段
        style: 'width: 144px'
      }
    ],
    form: {
      userId: '',
      time: '',
      reportType: ''
    }
  },
  method: {
    search(form) {
      // 搜索时回调form信息
    }
  }
}