El-Plus-Crud

Appearance

Table 表格 ​

多级动态表头 ​

实现动态表格，需要在列表项配置 children: [ ] 和 tbName: string 属性。children 属性里配置 子列表项，tbName 属性需要定义该表格 唯一 的列表名称（因为在切换隐藏表头时，会以该名称存入本地，如果有重复，则会产生影响）望悉知！

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

<script lang="ts" setup>
  const tableConfig = ref({
    tbName: 'dateList',
    column: [
      { prop: 'id', label: 'id' },
      {
        prop: 'year',
        label: '年',
        children: [
          {
            prop: 'January',
            label: '一月',
            children: [
              { prop: 'one', label: '1st' },
              { prop: 'two', label: '2nd' }
            ]
          },
          { prop: 'February', label: '二月' },
          { prop: 'March', label: '三月' }
        ]
      }
    ]
  })
</script>
<div class="demo">
  <ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />
</div>

<script lang="ts" setup>
  const tableConfig = ref({
    tbName: 'dateList',
    column: [
      { prop: 'id', label: 'id' },
      {
        prop: 'year',
        label: '年',
        children: [
          {
            prop: 'January',
            label: '一月',
            children: [
              { prop: 'one', label: '1st' },
              { prop: 'two', label: '2nd' }
            ]
          },
          { prop: 'February', label: '二月' },
          { prop: 'March', label: '三月' }
        ]
      }
    ]
  })
</script>

自定义编辑列 ​

列表项配置 type 属性，可以使该项变成可编辑列。表格的 type 类型可以参考 Form 表单配置属性

代码示例
vue
<ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="tableConfig" :isPager="false" />

<script lang="ts" setup>
// 表格数据
let tableData = reactive([
  { id: 1, name: '商品1', price: 10, number: 10 },
  { id: 2, name: '商品2', price: 25, number: 0 },
  { id: 3, name: '商品3', price: 2, number: 2 }
])
const tableConfig = ref({
  column: [
    { prop: 'name', label: '商品名称', minWidth: '120px' },
    { prop: 'price', label: '价格', format: 'yuan', minWidth: '160px' },
    { prop: 'number', label: '商品数量', required: true, type: 'number', minWidth: '160px' },
    {
      label: '操作',
      type: 'btns',
      fixed: 'right',
      btns: [{ label: '删除', btnType: 'danger', on: { click: () => {} } }]
    }
  ]
} as ITableConfig)
</script>
<ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="tableConfig" :isPager="false" />

<script lang="ts" setup>
// 表格数据
let tableData = reactive([
  { id: 1, name: '商品1', price: 10, number: 10 },
  { id: 2, name: '商品2', price: 25, number: 0 },
  { id: 3, name: '商品3', price: 2, number: 2 }
])
const tableConfig = ref({
  column: [
    { prop: 'name', label: '商品名称', minWidth: '120px' },
    { prop: 'price', label: '价格', format: 'yuan', minWidth: '160px' },
    { prop: 'number', label: '商品数量', required: true, type: 'number', minWidth: '160px' },
    {
      label: '操作',
      type: 'btns',
      fixed: 'right',
      btns: [{ label: '删除', btnType: 'danger', on: { click: () => {} } }]
    }
  ]
} as ITableConfig)
</script>

可以结合 ElPlusForm 表单使用，如果想要对表格编辑列数据进行校验，需要在 beforeRequest 中设置校验规则

代码示例
html
<div class="form">
  <ElPlusForm v-model="submitFormData" v-bind="submitFormConfig">
    <ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="tableConfig" :isPager="false" />
  </ElPlusForm>
</div>

<script lang="ts" setup>
  const submitFormConfig = ref({
    column: 2,
    beforeRequest: (data: any) => {
      for (let i = 0; i < tableData.length; i++) {
        if (!tableData[i].number) {
          ElMessage.error(`请填写${tableData[i].name}的数量!`)
          return false
        }
      }
      console.log('当前表单数据为：', data)
      console.log('当前表格数据为：', tableData)
    },
    formDesc: {
      payType: { type: 'select', label: '支付方式', options: 'payTypeList' }
    } as IFormDesc
  } as IFormConfig)
</script>
<div class="form">
  <ElPlusForm v-model="submitFormData" v-bind="submitFormConfig">
    <ElPlusTable ref="tableListRef" v-model="tableData" :tableConfig="tableConfig" :isPager="false" />
  </ElPlusForm>
</div>

<script lang="ts" setup>
  const submitFormConfig = ref({
    column: 2,
    beforeRequest: (data: any) => {
      for (let i = 0; i < tableData.length; i++) {
        if (!tableData[i].number) {
          ElMessage.error(`请填写${tableData[i].name}的数量!`)
          return false
        }
      }
      console.log('当前表单数据为：', data)
      console.log('当前表格数据为：', tableData)
    },
    formDesc: {
      payType: { type: 'select', label: '支付方式', options: 'payTypeList' }
    } as IFormDesc
  } as IFormConfig)
</script>