El-Plus-Crud

Appearance

Table 表格 ​

选项卡配置 ​

列表项配置 tabConf ，在 tabConf 中设置 prop: string 决定 tab 的字段，设置 tabs: [ ] 配置选项卡

代码示例
html
<ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />

<script lang="ts" setup>
  let tableData = reactive([
    { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
    { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
    { id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' }
  ])
  const tableConfig = ref({
    tabConf: {
      prop: 'sex',
      tabs: [
        { label: '女', value: 0 },
        { label: '男', value: 1 }
      ]
    },
    fetch: async (postData: any) => {
      const result = { records: tableData.filter((item) => postData.sex === item.sex) }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>
<ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />

<script lang="ts" setup>
  let tableData = reactive([
    { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
    { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
    { id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' }
  ])
  const tableConfig = ref({
    tabConf: {
      prop: 'sex',
      tabs: [
        { label: '女', value: 0 },
        { label: '男', value: 1 }
      ]
    },
    fetch: async (postData: any) => {
      const result = { records: tableData.filter((item) => postData.sex === item.sex) }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>

在 tabs 配置项里添加 key: srting 值并且结合 fetch，可以获取该项的数量

代码示例
ts
const tableConfig = ref({
  
  tabConf: {
    fetch: async () => {
      const result = { 0: tableData.filter((item) => item.sex === 0).length, 1: tableData.filter((item) => item.sex === 1).length }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    prop: 'sex',
    tabs: [
      { label: '女', value: 0, key: '0' },
      { label: '男', value: 1, key: '1' }
    ]
  },
  fetch: async (postData: any) => {
    const result = { records: tableData.filter((item) => postData.sex === item.sex) }
    return await new Promise((resolve) => {
      setTimeout(() => resolve(result), 1000)
    })
  },
  column: [
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ]
} as ITableConfig)
const tableConfig = ref({
  
  tabConf: {
    fetch: async () => {
      const result = { 0: tableData.filter((item) => item.sex === 0).length, 1: tableData.filter((item) => item.sex === 1).length }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    prop: 'sex',
    tabs: [
      { label: '女', value: 0, key: '0' },
      { label: '男', value: 1, key: '1' }
    ]
  },
  fetch: async (postData: any) => {
    const result = { records: tableData.filter((item) => postData.sex === item.sex) }
    return await new Promise((resolve) => {
      setTimeout(() => resolve(result), 1000)
    })
  },
  column: [
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ]
} as ITableConfig)

插槽 ​

想要对列表进行扩展运用，可以使用 default 和 bottom 插槽

代码示例
html
<div class="demo">
  <ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false">
    <template #default>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是列表的 default 默认插槽</div>
    </template>
    <template #bottom>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是列表的 bottom 插槽</div>
    </template>
  </ElPlusTable>
</div>

<script lang="ts" setup>
  const tableConfig = ref({
    fetch: async (postData: any) => {
      const result = { records: tableData }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>
<div class="demo">
  <ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false">
    <template #default>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是列表的 default 默认插槽</div>
    </template>
    <template #bottom>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是列表的 bottom 插槽</div>
    </template>
  </ElPlusTable>
</div>

<script lang="ts" setup>
  const tableConfig = ref({
    fetch: async (postData: any) => {
      const result = { records: tableData }
      return await new Promise((resolve) => {
        setTimeout(() => resolve(result), 1000)
      })
    },
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>

想自行 DIY 表单，可以配置 isDIYMain：true 使用 main 插槽

代码示例
html
<div class="demo">
  <ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="{}" :isDIYMain="true" :isPager="false">
    <template #main="{tableData}">
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">
        这里是模态表单内容的 main 默认插槽
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="Name" />
        </el-table>
      </div>
    </template>
  </ElPlusTable>
</div>
<div class="demo">
  <ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="{}" :isDIYMain="true" :isPager="false">
    <template #main="{tableData}">
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">
        这里是模态表单内容的 main 默认插槽
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="Name" />
        </el-table>
      </div>
    </template>
  </ElPlusTable>
</div>