br-dionysus 1.17.6 → 1.18.0

package/cypress/component/MSelectTable.cy.ts

@@ -0,0 +1,538 @@
+import { MSelectTable } from '../../packages'
+
+describe('下拉表格选择器组件<MSelectTable />', () => {
+  const options: Option[] = [
+    { label: '这是选项一', value: 'a' },
+    { label: '这是选项二', value: 'b' },
+    { label: '这是选项三', value: 'c' }
+  ]
+  const tableTitle: TableTitle[] = [
+    { prop: 'label', label: '名称', minWidth: 100 },
+    { prop: 'value', label: '编码', minWidth: 100 }
+  ]
+
+  it('单选并触发 selected 事件', () => {
+    const selectedSpy = cy.spy().as('selectedSpy')
+
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        options,
+        tableTitle,
+        onSelected: selectedSpy
+      }
+    })
+
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body tr').eq(0).click()
+    cy.get('@selectedSpy').should('have.been.calledWith', 'a')
+  })
+
+  it('单选情况下的 name 参数的生效', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        modelValue: 'a',
+        name: '自定义名称A',
+        options,
+        tableTitle
+      }
+    })
+
+    cy.get('.el-input__wrapper').click()
+    cy.get('.el-input__inner').should('have.value', '自定义名称A')
+  })
+
+  it('多选情况下的 name 参数的生效', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: true,
+        modelValue: ['a', 'b'],
+        name: ['标签A', '标签B'],
+        options,
+        tableTitle
+      }
+    })
+
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.el-input-tag__wrapper .el-tag').eq(0).should('contain.text', '标签A')
+    cy.get('.el-input-tag__wrapper .el-tag').eq(1).should('contain.text', '标签B')
+  })
+
+  it('单选情况下的 辅助插槽', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        options,
+        tableTitle
+      },
+      slots: {
+        auxiliary: '<span class="aux-slot">辅助内容-单选</span>'
+      }
+    })
+
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .head-box .aux-slot').should('contain.text', '辅助内容-单选')
+  })
+
+  it('多选情况下的 辅助插槽', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: true,
+        options,
+        tableTitle
+      },
+      slots: {
+        auxiliary: '<div class="aux-slot">辅助内容-多选</div>'
+      }
+    })
+
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .head-box .aux-slot').should('contain.text', '辅助内容-多选')
+  })
+
+  // it('多选情况下输入内容后回车进行创建条目', () => {
+  // })
+
+  it('多选并显示确认按钮并确认触发 selectMultiple 事件', () => {
+    const selectMultipleSpy = cy.spy().as('selectMultipleSpy')
+
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: true,
+        isAffirmBtn: true,
+        options,
+        tableTitle,
+        onSelectMultiple: selectMultipleSpy
+      }
+    })
+
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(1).click()
+    cy.get('.br-m-table-box .head-box .el-button').click()
+
+    cy.get('@selectMultipleSpy').should('have.been.calledWith', ['a', 'b'])
+  })
+
+  it('远程搜索触发 remoteMethod 调用', () => {
+    const remoteSpy = cy.spy().as('remoteSpy')
+
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        remote: true,
+        remoteMethod: remoteSpy,
+        options,
+        tableTitle
+      }
+    })
+
+    cy.get('.el-input__wrapper').click()
+    cy.get('.el-input__inner').type('二')
+    cy.get('@remoteSpy').should((spy: any) => {
+      const arg = spy.args[spy.args.length - 1][0]
+      expect(arg).to.equal('二')
+    })
+  })
+
+  it('单选清空触发 clear 事件', () => {
+    const clearSpy = cy.spy().as('clearSpy')
+
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        modelValue: 'a',
+        name: '名称A',
+        options,
+        tableTitle,
+        onClear: clearSpy
+      }
+    })
+
+    cy.get('.el-input__wrapper').click()
+    cy.get('.el-input__clear').click()
+    cy.get('@clearSpy').should('have.been.called')
+  })
+
+  it('修改默认的 label 和 value', () => {
+    const opts = [
+      { text: '第一项', code: 'x1' },
+      { text: '第二项', code: 'x2' },
+      { text: '第三项', code: 'x3' }
+    ]
+    const titles = [
+      { prop: 'text', label: '名称', minWidth: 100 },
+      { prop: 'code', label: '编码', minWidth: 100 }
+    ]
+
+    const singleSpy = cy.spy().as('singleSpy')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        options: opts,
+        tableTitle: titles,
+        keywords: { label: 'text', value: 'code' },
+        onSelected: singleSpy
+      }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body tr').eq(0).click()
+    cy.get('@singleSpy').should('have.been.calledWith', 'x1')
+    cy.get('.el-input__inner').should('have.value', '第一项')
+
+    const multiSpy = cy.spy().as('multiSpy')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: true,
+        isAffirmBtn: true,
+        options: opts,
+        tableTitle: titles,
+        keywords: { label: 'text', value: 'code' },
+        onSelectMultiple: multiSpy
+      }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(1).click()
+    cy.get('.br-m-table-box .head-box .el-button').click()
+    cy.get('@multiSpy').should('have.been.calledWith', ['x1', 'x2'])
+  })
+
+  it('占位符 placeholder 展示', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        placeholder: '请输入内容',
+        options,
+        tableTitle
+      }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.el-input__inner').should('have.attr', 'placeholder', '请输入内容')
+  })
+
+  it('禁用态 disabled 不可交互', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: true,
+        disabled: true,
+        options,
+        tableTitle
+      }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box').should('not.be.visible')
+  })
+
+  it('尺寸 size=large 样式生效', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        size: 'large',
+        options,
+        tableTitle
+      }
+    })
+    cy.get('.el-input').should('have.class', 'el-input--large')
+  })
+
+  it('尺寸 size=small 样式生效', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        size: 'small',
+        options,
+        tableTitle
+      }
+    })
+    cy.get('.el-input').should('have.class', 'el-input--small')
+  })
+
+  it('渲染 options 与 tableTitle 列头', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: {
+        multiple: false,
+        options,
+        tableTitle
+      }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table__header th').eq(0).should('contain.text', '名称')
+    cy.get('.br-m-table-box .el-table__header th').eq(1).should('contain.text', '编码')
+    cy.get('.br-m-table-box .el-table__body tr').should('have.length', options.length)
+  })
+
+  it('total 显示分页器', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: false, total: 10, options, tableTitle }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.m-page .el-pagination').should('be.visible')
+  })
+
+  // it('自定义 filterMethod 与 filterable 配合', () => {
+  //   const filterSpy = cy.spy().as('filterSpy')
+  //   cy.mount(MSelectTable as any, {
+  //     global: { plugins: [ElementPlus] },
+  //     props: { multiple: false, filterable: true, filterMethod: filterSpy, options, tableTitle }
+  //   })
+  //   cy.get('.el-input__wrapper').click()
+  //   cy.get('.el-input__inner').type('二')
+  //   cy.get('@filterSpy').should((spy: any) => {
+  //     const args = spy.args[spy.args.length - 1]
+  //     expect(args[0]).to.equal('二')
+  //     expect(args[1]).to.have.property('currentPage')
+  //     expect(args[1]).to.have.property('pageSize')
+  //   })
+  // })
+
+  // it('开启 filterable 本地关键字筛选', () => {
+  //   cy.mount(MSelectTable as any, {
+  //     global: { plugins: [ElementPlus] },
+  //     props: { multiple: false, filterable: true, options, tableTitle }
+  //   })
+  //   cy.get('.el-input__wrapper').click()
+  //   cy.get('.el-input__inner').type('二')
+  //   cy.get('.br-m-table-box .el-table__body tr').should('have.length', 1)
+  //   cy.get('.br-m-table-box .el-table__body tr').eq(0).should('contain.text', '这是选项二')
+  // })
+
+  it('remote 与 remoteMethod 组合远程搜索', () => {
+    const remoteSpy = cy.spy().as('remoteSpyAll')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: true, remote: true, filterable: true, remoteMethod: remoteSpy, options, tableTitle }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.el-input-tag__wrapper input').type('三')
+    cy.get('@remoteSpyAll').should((spy: any) => {
+      const args = spy.args[spy.args.length - 1]
+      expect(args[0]).to.equal('三')
+      expect(args[1]).to.have.property('currentPage')
+    })
+  })
+
+  it('reserveSelection 翻页多选保留', () => {
+    const toPageSpy = cy.spy().as('toPageSpy')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: true, reserveSelection: true, total: 10, options, tableTitle, onToPage: toPageSpy }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(1).click()
+    cy.get('.m-page .btn-next').click({ force: true })
+    cy.get('@toPageSpy').should('have.been.called')
+    cy.get('.m-page .btn-prev').click({ force: true })
+    cy.get('.br-m-table-box .el-table__body .el-checkbox.is-checked').should('have.length', 2)
+  })
+
+  it('tableHeight 指定表格高度', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: false, tableHeight: 300, options, tableTitle }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table').should('have.attr', 'style').and('include', 'height')
+  })
+
+  it('isAffirmBtn 有确认按钮时 selected 不触发', () => {
+    const sel = cy.spy().as('sel')
+    const mul = cy.spy().as('mul')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: true, isAffirmBtn: true, options, tableTitle, onSelected: sel, onSelectMultiple: mul }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('@sel').should('not.have.been.called')
+    cy.get('.br-m-table-box .head-box .el-button').click()
+    cy.get('@mul').should('have.been.called')
+  })
+
+  it('scrollbarAlwaysOn 常显滚动条', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: false, scrollbarAlwaysOn: true, tableHeight: 100, options, tableTitle }
+    })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body-wrapper').should('have.css', 'overflow')
+  })
+
+  it('allowCreate 允许创建条目', () => {
+    const mul = cy.spy().as('mulCreate')
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: true, allowCreate: true, isAffirmBtn: true, options, tableTitle, onSelectMultiple: mul }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.el-input-tag__wrapper input').type('新建项{enter}')
+    cy.get('.br-m-table-box .el-table__body').should('contain.text', '新建项')
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').last().click()
+    cy.get('.br-m-table-box .head-box .el-button').click()
+    cy.get('@mulCreate').should((spy: any) => {
+      const args = spy.args[spy.args.length - 1][0]
+      expect(args).to.include('新建项')
+    })
+  })
+
+  it('popupWidth 弹窗宽度配置', () => {
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: false, popupWidth: 600, options, tableTitle } })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box').should('have.attr', 'style').and('include', 'width: 600px')
+  })
+
+  it('border 开启表格边框', () => {
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: false, border: true, options, tableTitle } })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table').should('have.class', 'el-table--border')
+  })
+
+  it('事件 selected 单选返回值与行数据', () => {
+    const spySel = cy.spy().as('spySel')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: false, options, tableTitle, onSelected: spySel } })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body tr').eq(1).click()
+    cy.get('@spySel').should((spy: any) => {
+      const args = spy.args[spy.args.length - 1]
+      expect(args[0]).to.equal('b')
+      expect(args[1]).to.have.property('label', '这是选项二')
+      expect(args[1]).to.have.property('value', 'b')
+    })
+  })
+
+  it('事件 selected 多选返回值与行数据集合', () => {
+    const spySelMul = cy.spy().as('spySelMul')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: true, options, tableTitle, onSelected: spySelMul } })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(2).click()
+    cy.get('@spySelMul').should((spy: any) => {
+      const args = spy.args[spy.args.length - 1]
+      expect(args[0]).to.include.members(['a', 'c'])
+      expect(args[1]).to.have.length(2)
+    })
+  })
+
+  it('事件 toPage 未使用 filterMethod 时触发', () => {
+    const tp = cy.spy().as('tp')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: false, total: 10, options, tableTitle, onToPage: tp } })
+    cy.get('.el-input__wrapper').click()
+    cy.get('.m-page .btn-next').click({ force: true })
+    cy.get('@tp').should('have.been.called')
+  })
+
+  it('事件 selectMultiple 确认按钮回调', () => {
+    const mul = cy.spy().as('mulEvt')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: true, isAffirmBtn: true, options, tableTitle, onSelectMultiple: mul } })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('.br-m-table-box .head-box .el-button').click()
+    cy.get('@mulEvt').should('have.been.calledWith', ['a'])
+  })
+
+  it('事件 clear 清空时触发', () => {
+    const clr = cy.spy().as('clr')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { modelValue: 'a', name: '名称A', options, tableTitle, onClear: clr } })
+    cy.get('.el-input__inner').click()
+    cy.get('.el-input__suffix .el-icon').click()
+    cy.get('@clr').should('have.been.called')
+  })
+
+  it('事件 removeTag 多选删除 tag 时触发', () => {
+    const rm = cy.spy().as('rm')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: true, modelValue: ['a', 'b'], name: ['标签A', '标签B'], options, tableTitle, onRemoveTag: rm } })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.el-input-tag__wrapper .el-tag .el-tag__close').eq(0).click({ force: true })
+    cy.get('@rm').should('have.been.called')
+  })
+
+  it('事件 selectChange 勾选变更时触发', () => {
+    const sc = cy.spy().as('sc')
+    cy.mount(MSelectTable as any, { global: { plugins: [] }, props: { multiple: true, options, tableTitle, onSelectChange: sc } })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .el-table__body .el-checkbox').eq(0).click()
+    cy.get('@sc').should('have.been.called')
+  })
+
+  // it('方法 defaultBackFillValue 多选翻页默认反填', () => {
+  //   const Wrapper = defineComponent({
+  //     setup: () => {
+  //       const compRef = ref<InstanceType<typeof MSelectTable> | null>(null)
+  //       onMounted(() => {
+  //         ;(window as unknown as { __mst?: InstanceType<typeof MSelectTable> }).__mst = compRef.value as InstanceType<typeof MSelectTable>
+  //       })
+  //       return () => h(MSelectTable as any, { ref: compRef, multiple: true, reserveSelection: true, modelValue: ['b'], options, tableTitle })
+  //     }
+  //   })
+  //   cy.mount(Wrapper as any, { global: { plugins: [ElementPlus] } })
+  //   cy.window().then((win) => {
+  //     win.__mst?.focus()
+  //     win.__mst?.defaultBackFillValue()
+  //   })
+  //   cy.get('.br-m-table-box .el-table__body tr').contains('这是选项二').parent().find('.el-checkbox').should('have.class', 'is-checked')
+  // })
+  //
+  // it('方法 clear 手动清空', () => {
+  //   const Wrapper = defineComponent({
+  //     setup: () => {
+  //       const compRef = ref<InstanceType<typeof MSelectTable> | null>(null)
+  //       onMounted(() => {
+  //         ;(window as unknown as { __mst?: InstanceType<typeof MSelectTable> }).__mst = compRef.value as InstanceType<typeof MSelectTable>
+  //       })
+  //       return () => h(MSelectTable as any, { ref: compRef, multiple: true, modelValue: ['a', 'b'], name: ['标签A', '标签B'], options, tableTitle })
+  //     }
+  //   })
+  //   cy.mount(Wrapper as any, { global: { plugins: [ElementPlus] } })
+  //   cy.window().then((win) => {
+  //     win.__mst?.focus()
+  //     win.__mst?.clear()
+  //   })
+  //   cy.get('.br-m-table-box .el-table__body .el-checkbox.is-checked').should('have.length', 0)
+  //   cy.get('.el-input-tag__wrapper .el-tag').should('have.length', 0)
+  // })
+  //
+  // it('方法 focus 手动聚焦下拉框', () => {
+  //   const Wrapper = defineComponent({
+  //     setup: () => {
+  //       const compRef = ref<InstanceType<typeof MSelectTable> | null>(null)
+  //       onMounted(() => {
+  //         ;(window as unknown as { __mst?: InstanceType<typeof MSelectTable> }).__mst = compRef.value as InstanceType<typeof MSelectTable>
+  //       })
+  //       return () => h(MSelectTable as any, { ref: compRef, multiple: false, options, tableTitle })
+  //     }
+  //   })
+  //   cy.mount(Wrapper as any, { global: { plugins: [ElementPlus] } })
+  //   cy.window().then((win) => {
+  //     win.__mst?.focus()
+  //   })
+  //   cy.get('.br-m-table-box').should('be.visible')
+  // })
+
+  it('插槽 auxiliary 表头辅助信息渲染', () => {
+    cy.mount(MSelectTable as any, {
+      global: { plugins: [] },
+      props: { multiple: true, options, tableTitle },
+      slots: { auxiliary: '<span class="aux-slot">辅助信息</span>' }
+    })
+    cy.get('.el-input-tag__wrapper').click()
+    cy.get('.br-m-table-box .head-box .aux-slot').should('contain.text', '辅助信息')
+  })
+})

package/cypress/component/MSelectV2.cy.ts

@@ -1,7 +1,6 @@
 import { mount } from 'cypress/vue'
 import { MSelectV2 } from '../../packages'
 import { ElSelect, ElCheckbox, ElOption } from 'element-plus'
-import 'element-plus/dist/index.css'
 
 Cypress.Commands.add('mount' as any, (component: any, options: any = {}) => {
   options.global = options.global || {}

package/cypress/component/MTable.cy.ts

@@ -0,0 +1,123 @@
+import dionysus, { MTable, MTableColumn } from '../../packages'
+import { defineComponent, ref, h, nextTick } from 'vue'
+
+type Row = { id: number; sn: number; date: string; name: string; address: string; tag: string; qty: number }
+
+const rows: Row[] = [
+  { id: 1, sn: 1, date: '2023-01-01', name: 'Tom1', address: 'LA', tag: 'Home', qty: 10 },
+  { id: 2, sn: 2, date: '2023-01-02', name: 'Tom2', address: 'LA', tag: 'Office', qty: 20 },
+  { id: 3, sn: 3, date: '2023-01-03', name: 'Tom3', address: 'SF', tag: 'Home', qty: 30 }
+]
+
+type Handlers = {
+  onSelection?: (val: string) => void,
+  onConfig?: (val: Record<string, { show: boolean; sort: number }>) => void,
+  onExpand?: (row: unknown, expandedRows: unknown[]) => void,
+  onCopyData?: (val: any) => void,
+  onPasteData?: (val: any, tableData: any) => void
+}
+
+const Wrapper = defineComponent({
+  props: {
+    variant: { type: String, required: true },
+    handlers: { type: Object as () => Handlers, required: false, default: () => ({}) }
+  },
+  setup: (props, { expose }) => {
+    const mTableRef = ref()
+    expose({ mTableRef })
+    const filtersValue = ref<Record<string, Array<string | number>>>({})
+    const selectionCell = ref<string>('')
+    const tableConfig = ref<Record<string, { show: boolean; sort: number; headerAlign?: 'left' | 'center' | 'right' }>>({
+      name: { show: true, sort: 1 },
+      address: { show: true, sort: 2 }
+    })
+    if (props.variant === 'tableConfig') {
+      nextTick(() => { tableConfig.value = { name: { show: true, sort: 2 }, address: { show: false, sort: 1 } } })
+    }
+    const renderCols = () => {
+      if (props.variant === 'basic') {
+        return [h(MTableColumn as any, { prop: 'name', label: '名称', minWidth: 80 }), h(MTableColumn as any, { prop: 'address', label: '地址', minWidth: 80 })]
+      }
+      if (props.variant === 'filter') {
+        return [h(MTableColumn as any, {
+          prop: 'tag',
+          label: '标签',
+          filters: [{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }],
+          filtersValue: filtersValue.value,
+          'onUpdate:filtersValue': (val: Record<string, Array<string | number>>) => { filtersValue.value = val }
+        })]
+      }
+      if (props.variant === 'expand') {
+        return [h(MTableColumn as any, { prop: 'sn', label: '序号', minWidth: 80 }), h(MTableColumn as any, { prop: 'name', label: '名称', minWidth: 80 })]
+      }
+      if (props.variant === 'selection') {
+        return [h(MTableColumn as any, { prop: 'name', label: '名称', minWidth: 80 }), h(MTableColumn as any, { prop: 'address', label: '地址', minWidth: 80 })]
+      }
+      if (props.variant === 'tableConfig') {
+        return [h(MTableColumn as any, { prop: 'name', label: '名称', minWidth: 80 }), h(MTableColumn as any, { prop: 'address', label: '地址', minWidth: 80 })]
+      }
+      return []
+    }
+    return () => h(MTable as any, {
+      data: rows,
+      filtersValue: props.variant === 'filter' ? filtersValue.value : undefined,
+      rowKey: props.variant === 'expand' ? 'id' : undefined,
+      expandProp: props.variant === 'expand' ? 'sn' : undefined,
+      selectionCell: props.variant === 'selection' ? selectionCell.value : undefined,
+      'onUpdate:selectionCell': props.variant === 'selection' ? (val: string) => { selectionCell.value = val; props.handlers?.onSelection?.(val) } : undefined,
+      tableConfig: props.variant === 'tableConfig' ? tableConfig.value : undefined,
+      'onUpdate:tableConfig': props.variant === 'tableConfig' ? (val: Record<string, { show: boolean; sort: number }>) => { props.handlers?.onConfig?.(val) } : undefined,
+      onPrivateExpandChange: props.variant === 'expand' ? (row: unknown, expandedRows: unknown[]) => { props.handlers?.onExpand?.(row, expandedRows) } : undefined,
+      onCopyData: (val: any) => { props.handlers?.onCopyData?.(val) },
+      onPasteData: (val: any, tableData: any) => { props.handlers?.onPasteData?.(val, tableData) },
+      ref: mTableRef
+    }, { default: () => renderCols() })
+  }
+})
+
+describe('表格组件<MTable />', () => {
+  it('基础渲染列头与行', () => {
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'basic' } })
+    cy.get('.br-m-table-box .el-table__header th').eq(0).should('contain.text', '名称')
+    cy.get('.br-m-table-box .el-table__header th').eq(1).should('contain.text', '地址')
+    cy.get('.br-m-table-box .el-table__body tr').should('have.length', rows.length)
+  })
+  it('筛选过滤显示 Home', () => {
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'filter' } })
+    cy.get('.br-m-table-box .el-table__header th').contains('标签').parent().find('.u-icon').click({ force: true })
+    cy.get('.m-filter-box .u-checkbox-group .el-checkbox').contains('Home').click({ force: true })
+    cy.get('.m-filter-box .u-btn-gp .el-button').contains('筛选').click({ force: true })
+    cy.get('.br-m-table-box .el-table__body tr').should('have.length', 2)
+  })
+  it('展开列并触发 privateExpandChange', () => {
+    const spy = cy.spy().as('expandSpy')
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'expand', handlers: { onExpand: spy } } })
+    cy.get('.br-m-table-box .el-table__body tr').eq(0).find('.u-my-table-column-icon').click({ force: true })
+    cy.get('@expandSpy').should('have.been.called')
+  })
+  it('单元格选中', () => {
+    const selSpy = cy.spy().as('selUpdate')
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'selection', handlers: { onSelection: selSpy } } })
+    cy.get('.br-m-table-box .el-table__body tr').eq(1).find('td').eq(0).click()
+    cy.get('@selUpdate').should('have.been.calledWith', 'name')
+    cy.get('.br-m-table-box .el-table__body tr').eq(1).find('td').eq(0).should('have.attr', 'style').and('include', 'background-color')
+  })
+  it('更新 tableConfig 触发事件', () => {
+    const configSpy = cy.spy().as('configSpy')
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'tableConfig', handlers: { onConfig: configSpy } } })
+    cy.get('@configSpy').should('have.been.called')
+  })
+  it('暴露方法 getTableTitle', () => {
+    cy.mount(Wrapper as any, { global: { plugins: [dionysus], components: {} }, props: { variant: 'basic' } })
+      .then(({ wrapper }) => {
+        const mTable = wrapper.vm.mTableRef
+        expect(mTable).to.not.equal(undefined)
+        const titles = mTable.getTableTitle()
+        expect(titles).to.have.length(2)
+        expect(titles[0].label).to.equal('名称')
+        expect(titles[0].prop).to.equal('name')
+        expect(titles[1].label).to.equal('地址')
+        expect(titles[1].prop).to.equal('address')
+      })
+  })
+})