Table 表格

功能按钮配置

列表顶部的工具栏 toolbar 里配置 btns: [ ] 属性

代码示例

vue

<ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />
<ElPlusFormDialog v-model:show="isShowDialog" v-model="formData" v-bind="formConfig" title="新增" />

<script lang="ts" setup>
import { ElMessage } from 'element-plus'

let formData = reactive({})

const isShowDialog = ref(false)
let tableData = reactive([
  { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
  { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' }
])

const tableConfig = ref({
  fetch: async (postData: any) => {
    const result = { records: tableData }
    return await new Promise((resolve) => {
      setTimeout(() => {
        resolve(result)
      }, 1000)
    })
  },
  column: [
    { prop: 'id', label: 'id' },
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ],
  toolbar: {
    btns: [{ label: '新增', on: { click: () => (isShowDialog.value = true) } }]
  }
} as ITableConfig)

// 表单
const formConfig = ref({
  beforeRequest: (data: any) => {
    data.id = tableData.length + 1
    tableData.push(data)
    isShowDialog.value = false
    ElMessage.success('操作成功！')
  },
  formDesc: {
    name: { type: 'input', label: '姓名', maxlength: 10, required: true },
    sex: { type: 'radio', label: '性别', options: 'sexOptions', required: true },
    age: { type: 'number', label: '年龄', attrs: { min: 0, max: 100 }, required: true },
    address: { type: 'input', label: '地址', required: true }
  } as IFormDesc
} as IFormConfig)
</script>

<ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />
<ElPlusFormDialog v-model:show="isShowDialog" v-model="formData" v-bind="formConfig" title="新增" />

<script lang="ts" setup>
import { ElMessage } from 'element-plus'

let formData = reactive({})

const isShowDialog = ref(false)
let tableData = reactive([
  { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
  { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' }
])

const tableConfig = ref({
  fetch: async (postData: any) => {
    const result = { records: tableData }
    return await new Promise((resolve) => {
      setTimeout(() => {
        resolve(result)
      }, 1000)
    })
  },
  column: [
    { prop: 'id', label: 'id' },
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ],
  toolbar: {
    btns: [{ label: '新增', on: { click: () => (isShowDialog.value = true) } }]
  }
} as ITableConfig)

// 表单
const formConfig = ref({
  beforeRequest: (data: any) => {
    data.id = tableData.length + 1
    tableData.push(data)
    isShowDialog.value = false
    ElMessage.success('操作成功！')
  },
  formDesc: {
    name: { type: 'input', label: '姓名', maxlength: 10, required: true },
    sex: { type: 'radio', label: '性别', options: 'sexOptions', required: true },
    age: { type: 'number', label: '年龄', attrs: { min: 0, max: 100 }, required: true },
    address: { type: 'input', label: '地址', required: true }
  } as IFormDesc
} as IFormConfig)
</script>

· 这里的 options 使用的字符串方式，如果不会使用参考 globalData 基础用法

导入 & 导出按钮

在列表顶部的工具栏 toolbar 里配置 export 属性导出数据 ( 需要 formConfig 属性不为 null ) 配置参数请参考 table Api 导出属性，导入配置在 btns 属性里，配置属性 eltype："upload" ，在 on 的钩子对象里添加 success:(btnBack: IBtnBack)=>{}

代码示例

const tableConfig = ref({
  fetch: async (postData: any) => {
    const queryDataList = []
    if (postData.searchKey) {
      tableData.filter((item: any) => {
        if (item.name.includes(postData.searchKey)) {
          queryDataList.push(item)
        }
      })
    }
    const result = { records: tableData }
    return await new Promise((resolve) => {
      setTimeout(() => {
        if (!postData.searchKey) {
          resolve(result)
        } else {
          resolve(queryDataList)
        }
      }, 1000)
    })
  },
  column: [
    { prop: 'id', label: 'id' },
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ],
  
  toolbar: {
    btns: [
      {
        label: '批量导入',
        elType: 'upload',
        on: {
          success: (btnBack: IBtnBack) => {
            console.log('btnBack: ', btnBack)
          }
        }
      }
    ],
    export: { name: '导出', url: '' },
    formConfig: {
      formDesc: {
        searchKey: { type: 'input', label: '输入查询', placeholder: '请输入姓名' }
      }
    }
  }
} as ITableConfig)

const tableConfig = ref({
  fetch: async (postData: any) => {
    const queryDataList = []
    if (postData.searchKey) {
      tableData.filter((item: any) => {
        if (item.name.includes(postData.searchKey)) {
          queryDataList.push(item)
        }
      })
    }
    const result = { records: tableData }
    return await new Promise((resolve) => {
      setTimeout(() => {
        if (!postData.searchKey) {
          resolve(result)
        } else {
          resolve(queryDataList)
        }
      }, 1000)
    })
  },
  column: [
    { prop: 'id', label: 'id' },
    { prop: 'name', label: '名字' },
    { prop: 'sex', label: '性别', format: 'formatSex' },
    { prop: 'age', label: '年龄' },
    { prop: 'address', label: '地址' }
  ],
  
  toolbar: {
    btns: [
      {
        label: '批量导入',
        elType: 'upload',
        on: {
          success: (btnBack: IBtnBack) => {
            console.log('btnBack: ', btnBack)
          }
        }
      }
    ],
    export: { name: '导出', url: '' },
    formConfig: {
      formDesc: {
        searchKey: { type: 'input', label: '输入查询', placeholder: '请输入姓名' }
      }
    }
  }
} as ITableConfig)

Table 表格 ​

功能按钮配置 ​

导入 & 导出按钮 ​

Table 表格

功能按钮配置

导入 & 导出按钮