v-el-table

V-El-Table developed using Vue and Element Plus, that's a table component library . It comprises 3 components: v-el-form, v-el-table, and v-el-table-plus.

中文文档.

Getting Started

Element Plus needs to installed first. How to install Element Plus?

Install

# Choose a package manager you like.

# NPM
$ npm install v-el-table

# Yarn
$ yarn add v-el-table

# pnpm
$ pnpm install v-el-table

CSS

//or main.js, App.vue
import "element-plus/dist/index.css";
import "v-el-table/style.css";

Auto import

There is a demo of auto import project(with pnpm workspace), please click vue-test.

For auto import component, config the file vite.config.ts like this:

import Components from 'unplugin-vue-components/vite'
import VElTableComponents from 'v-el-table/auto-import'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VElTableComponents, ElementPlusResolver()]
    })
  ]
})

Global Configure

//add language
i18n.setTranslations({
  'zh-hk': {
      reset: '重設',
      query: '查詢',
    }
})

// set component language
i18n.setLocale('zh-cn')

// set response data path of table plus the `query` parameter
Object.assign(dataPath, {
  data: 'data.list',
  currentPage: 'data.pageIndex',
  total: 'data.total'
})

For volar support, add this line to env.d.ts,

/// <reference types="./components.d.ts" />

Features

• Flexible, Configurable parameters
• Partial Reactivity
• ES Module and CommonJS support
• Volar compatibility with type hints
• Automatic component import
• JSX friendly
• Compact, gzip 5kB

Partial Reactivity

Non object basic data types' string | number | null | undefined | boolean 'can all be defined as local responsive parameters

const myLabel = ref('name')

const reactivePlaceholder = ref('Please input')

setTimeout(()=>{
  myLabel.value = 'name changed'
  reactivePlaceholder.value = 'Please input name'
},1000)

const formFields: FormItemProps<FormType>[] = [
  {
    itemProps: { prop: 'name', label: myLabel },
    inputComponent: 'el-input',
    inputProps: { type: 'text', placeholder: reactivePlaceholder },
  },
]

Usage

v-el-form

<script setup lang="tsx">
import { reactive } from 'vue';
import { ElOption } from 'element-plus';
import type { VElFormProps } from 'v-el-table';

const configure: VElFormProps = reactive({
    form: {
        model: {
            name: 'v-el-table',
            components: 'small'
        },
        labelWidth: 100
    },
    fields: [
        {
            itemProps: { prop: 'name', label: 'Name' },
            inputComponent: 'el-input',
            inputProps: { type: 'text', placeholder: 'Please input' },
            inputEvents: {
                change: (...args: unknown[]) => console.log(...args)
            }
        },
        {
            itemProps: { prop: 'components', label: 'Components' },
            inputComponent: 'ElSelect',
            inputProps: { type: 'text', placeholder: 'Please Select a component' },
            inputEvents: {
                change: (...args: unknown[]) => console.log(...args)
            },
            inputChildren: () => <>{['v-el-form', 'v-el-table', 'v-el-table-plus'].map((val) =>
                <ElOption
                    label={val}
                    value={val}
                />)}</>
        }
    ]
})
</script>
<template>
    <VElForm v-bind="configure" />
</template>

How to get ElForm instance?

const formRef = ref<FormInstance>()

const formConfig: VElFormProps = ({
  getInstance: (r: FormInstance) => {
      formRef.value = r
  }
})

v-el-table

<script setup lang="tsx">
import type { VElTableProps } from 'v-el-table';
import { ElButton } from 'element-plus'

interface TableData { id: number; value: string }

const tableProps: VElTableProps<TableData> = reactive({
    table: {
        border: true,
        data: [{ id: 1, value: 'Hello table!' }],
        tableLayout: 'fixed'
    },
    columns: [
        { prop: 'id', label: 'id' },
        { prop: 'value', label: 'Value' },
        {
            prop: 'end',
            label: 'Operation',
            default: (props) => {
                return <ElButton text type="primary" onClick={() => console.log('To Edit',props.row)}>Edit</ElButton>
            },
            header() {
                return 'Operation'
            }
        }
    ],
    events: {
        cellClick(...args: unknown[]) {
            console.log('cellClick', ...args)
        }
    }
})
</script>
<template>
    <VElTable v-bind="tableProps" />
</template>

v-el-table-plus

<script setup lang="tsx">
import { reactive } from 'vue'
import { ElButton } from 'element-plus'
import type { TableColumn, VElTablePlusProps } from 'v-el-table'

interface TableData { id: number; value: string }

interface FormData { id: number }

const tablePlusConfig = reactive<VElTablePlusProps<TableData,FormData>>({
  // hideDefaultButton: true,
  title: 'My Table',
  query: (data: { currentPage: number }) => {
    console.log('query', data)
    return Promise.resolve({
      payload: {
        data: Array.from(Array(10)).map((i, index) => {
          const n = (data.currentPage - 1) * 10 + index + 1
          return { id: n, value: `line ${n}` }
        }),
        total: 20,
        page: data.currentPage
      },
      status: 'success',
      code: 0
    })
  },
  responsePath: {
    data: 'payload.data',
    currentPage: 'payload.page',
    total: 'payload.total'
  },
  buttons: [
    {
      key: 'add',
      name: 'create',
      icon: 'Plus',
      events: { click: () => console.log('To add one!') }
    },
    ['button', { class: 'el-button' }, 'del']
  ],
  tableProps: {
    table: {
      border: true,
      data: [{ id: 1, value: 'Hello table!' } as TableData],
      tableLayout: 'fixed' as 'fixed' | 'auto'
    },
    columns: [
      { prop: 'id', label: 'id' },
      { prop: 'value', label: 'Value' },
      {
        label: 'Operation',
        default: (scope: { row: TableData; column: TableColumn<TableData>; $index: number }) => {
          return (
            <ElButton text type="primary" onClick={() => console.log(scope.row)}>
              Edit
            </ElButton>
          )
        },
        header() {
          return 'Operation'
        }
      }
    ],
    events: {
      cellClick(...args: unknown[]) {
        console.log('cellClick', ...args)
      }
    }
  },
  formProps: {
    form: {
      model: {
        id: 1
      }
    },
    fields: [
      {
        itemProps: { prop: 'id', label: 'ID' },
        inputComponent: 'el-input',
        inputProps: { type: 'text', placeholder: 'Please input ID' },
        inputEvents: {}
      }
    ]
  }
})
</script>
<template>
  <VElTablePlus v-bind="tablePlusConfig" />
</template>

Get TablePlus instance

let instance: TablePlusExpose | void

const tablePlusConfig: VElTablePlusProps = reactive({
  getExpose(ins) {
      instance = ins
  }
})

v-el-table-tabs

<script setup lang="tsx">
import { reactive, ref } from 'vue'
import { i18n, VElTableTabs, type VElTableProps, type VElTableTabsProps } from 'v-el-table'

i18n.setLocale('zh-cn')


interface TableDataItem { id: number, value: string }
interface FormData { id: number, value: string }


const tableProps = reactive<VElTableProps<TableDataItem>>({
  table: { data: [{ id: 1, value: 'Hello table!' }], tableLayout: 'fixed' as 'fixed' | 'auto' },
  columns: [
    { prop: 'id', label: 'ID' },
    { prop: 'value', label: 'Value' },
    {
      prop: 'end', label: 'Operation',
      default: (props) => {
        return <button onClick={() => console.log(props)}>click</button>
      },
      header(props) {
        // console.log(props)
        return 'hello'
      }
    }
  ],
  events: {
    cellClick(...args: unknown[]) {
      console.log('cellClick', ...args)
    }
  }
})

const tableTabsConfig: VElTableTabsProps<TableDataItem, FormData> = {
  title: '',
  query: (data) => {
    // console.log('query', data)
    return Promise.resolve({
      payload: {
        data: Array.from(Array(10)).map((i, index) => {
          const n = (data.currentPage - 1) * 10 + index + 1
          return { id: n, value: `${data.find} ${n}` }
        }),
        total: 20,
        page: data.currentPage,
      },
      status: 'success', code: 0
    })
  },
  tabs: [{ label: 'Finished', name: 'finished', ...tableProps }, { label: 'Payment', name: 'payment', ...tableProps }],
  tabsCurrent: ref('finished'),
  tabsQueryKey: 'find',
  responsePath: {
    data: 'payload.data',
    currentPage: 'payload.page',
    total: 'payload.total',
  },
  buttons: [
    {
      key: 'add',
      name: 'Add',
      icon: 'CircleClose',
      events: { click: () => console.log('Hello world!') },
    },
    ['button', { class: 'el-button' }, 'remove'],
    () => <>
      <button class="el-button">hi</button>
    </>
  ],
  formProps: {
    form: {
      model: {
        id: 1,
        value: ''
      }
    },
    fields: [
      {
        itemProps: { prop: 'id', label: 'ID' },
        inputComponent: 'el-input',
        inputProps: { type: 'text', placeholder: 'Please input ID' },
        inputEvents: {}
      },
      {
        itemProps: { prop: 'value', label: 'Value' },
        inputComponent: 'el-input',
        inputEvents: {}
      },
    ]
  }
}

</script>

<template>
  <VElTableTabs v-bind='tableTabsConfig' />
</template>

Get TableTabs instance

let instance: TablePlusExpose | void

const tableTabsConfig: VElTablePlusProps = reactive({
  getExpose(ins) {
      instance = ins
  }
})

Contribution

Please read Contributing Guide.

License

MIT

Copyright (c) 2021-present, Quanju Wei