Appearance

Return to top
目录

Table 表格

为什么使用？

  • 采用JS配置方式生成筛选表单，大部分情况下会比写html稍微方便一点点
  • 提供了loading状态props
  • 提供了error状态props
  • 最小宽度默认确保了表头不换行
  • 默认开启了el-table的border、stripe
  • 默认开启了el-table-column的resizable
  • 提供了update、delete配置自动创建对应的编辑和删除按钮
  • 内容默认居中

基础用法

用法基本和el-table一致，不一样的是由template方式转为了JS配置方式；

支持透传el-table的属性和事件，支持调用el-table的方法。

vue
<template>
  <div style="margin-bottom: 10px;">
    <el-button @click="clearSelection()">clearSelection</el-button>
  </div>
  <jlc-table 
    ref="tableRef" 
    :columns="columns" 
    :data="tableData" 
    @selection-change="onSelectionChange"
  ></jlc-table>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { JlcTable } from '@sz-jlc/admin-vue3'

// cloumn配置基本和el-table-column一致
const columns = [
  { type: 'selection' },
  { type: 'index', label: '序号', width: 70, },
  { label: '姓名', prop: 'name', },
  {
    label: '性别',
    formatter(row: any) {
      const genderMap = {
        0: '女',
        1: '男'
      }
      return genderMap[row.gender] || '未知'
    }
  },
  { label: '年龄', prop: 'age', sortable: true, },
  { label: '岗位', prop: 'job', },
  { label: '个人介绍', prop: 'introduction', align: 'left' }
]

const tableData = [
  {
    name: '小明',
    gender: 1,
    age: 25,
    job: '前端工程师',
    introduction: '高级前端工程师，擅长原生JS，熟悉设计模式。'
  },
  {
    name: '小红',
    gender: 0,
    age: 28,
    job: '测试工程师',
    introduction: '高级测试工程师，6年工作经验，熟悉自动化测试。'
  },
  {
    name: '小军',
    gender: 1,
    age: 32,
    job: 'Java工程师',
    introduction: '资深架构师，解决过无数疑难杂症，擅长系统设计。'
  },
]

const tableRef = ref()

const onSelectionChange = (selection: any[]) => {
  console.log(selection)
}

const clearSelection = () => {
  tableRef.value.clearSelection()
}
</script>

loading、error状态

无数据
vue
<template>
  <div style="margin-bottom: 10px;">
    <el-button @click="loading = !loading">切换loading</el-button>
    <el-button @click="error = !error">切换error</el-button>
  </div>
  <jlc-table :columns="columns"  :data="tableData" :loading="loading" :error="error"></jlc-table>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { JlcTable } from '@sz-jlc/admin-vue3'
import { ElButton } from 'element-plus'

const loading = ref(false)
const error = ref(false)

const columns = [
  { label: '姓名', prop: 'name', },
  { label: '性别', prop: 'gender', },
  { label: '年龄', prop: 'age', },
  { label: '岗位', prop: 'job', }
]

const tableData = []
</script>

update、delete

vue
<template>
  <jlc-table 
    :columns="columns" 
    :data="tableData" 
    update 
    delete
    @update="onUpdate()"
    @delete="onDelete()"
  ></jlc-table>
</template>

<script setup lang='ts'>
import { JlcTable } from '@sz-jlc/admin-vue3'

const columns = [
  { label: '姓名', prop: 'name', },
  { label: '性别', prop: 'gender', },
  { label: '年龄', prop: 'age', },
  { label: '岗位', prop: 'job', }
]

const tableData = [
  {
    name: '小明',
    gender: '男',
    age: 18,
    job: '前端工程师'
  },
  {
    name: '小红',
    gender: '女',
    age: 19,
    job: '测试工程师'
  },
  {
    name: '小军',
    gender: '男',
    age: 20,
    job: 'Java工程师'
  },
]

const onUpdate = () => {
  console.log('click update')
}

const onDelete = () => {
  console.log('click delete')
}
</script>

TableColumn 插槽

未知
vue
<template>
  <jlc-table :columns="columns" :data="tableData">
    <template #gender="{ row }">
      <el-tag :type="genderTagTypeMap[row.gender] ?? 'info'">
        {{ genderMap[row.gender] || '未知' }}
      </el-tag>
    </template>
  </jlc-table>
</template>

<script setup lang='ts'>
import { ElTag } from 'element-plus'
import { JlcTable } from '@sz-jlc/admin-vue3'

const genderMap = { 0: '女', 1: '男' }
const genderTagTypeMap = { 0: 'danger', 1: '' }

const columns = [
  { label: '姓名', prop: 'name', },
  { label: '性别', slot: 'gender' },
  { label: '年龄', prop: 'age', },
  { label: '岗位', prop: 'job', }
]

const tableData = [
  {
    name: '小明',
    gender: 1,
    age: 18,
    job: '前端工程师'
  },
  {
    name: '小红',
    gender: 0,
    age: 19,
    job: '测试工程师'
  },
  {
    name: '小军',
    gender: 1,
    age: 20,
    job: 'Java工程师'
  },
]
</script>

属性

属性名说明类型可选值默认值是否必填
columns表格列TableColumn[]--是
loadingloading状态boolean-false否
errorerror状态boolean-false否
update是否生成编辑按钮boolean-false否
delete是否生成删除按钮boolean-false否
el-table的属性预期情况下支持所有el-table的属性，若某个场景下存在问题，请反馈。---否

TableColumn

属性名说明类型可选值默认值是否必填
type类型，在el-table基础上增加了一些，会有一些预设效果。stringselection/index/expand/date/time/phone-否
header表头渲染函数(h: any) => VNode--否
render内容渲染函数(h: any, row: object, column: object, $index: number) => VNode--否
slot表格列插槽string--否
el-table-column的属性预期情况下支持所有el-table-column的属性，若某个场景下存在问题，请反馈。---否

方法

方法名描述参数
query查询
  • queryNow(是否执行查询，会传递给query事件作为回调参数)
el-table的方法预期情况下支持所有el-table的方法，若某个场景下存在问题，请反馈。-

事件

事件名说明回调参数
updateupdate属性为true时，生成的编辑按钮的点击事件-
deletedelete属性为true时，生成的删除按钮的点击事件-

插槽

插槽说明
--

深圳嘉立创前端团队