br-dionysus

v1.18.22

Published

4 days ago

+ MDialog([对话框](#对话框))

0High
0Medium
0Low

yifangtongxing

shsupersoft

霸软业务组件库

组件列表

MDialog(对话框)
MInline(筛选)
MInputNumber(数值输入框组件)
MSelect(下拉选择器组件)
MSelectTable(下拉表格选择器)
MSelectTableV1(下拉表格选择器（旧版，只做维护不更新）)
MSelectV2(下拉选择器V2组件)
MTable(表格组件)
MTableColumn(表格列组件)
MTableColumnSet(表格头设置组件)
MTableSuper(整合表格组件)
MTableV2(虚拟化表格)
SkinConfig(皮肤设置)
TabPage(标签页组件)
useFormInline(筛选项配置化-hook)
usePackageConfig(配置保存与获取-hook)
useRemainingSpace(计算获取剩余空间-hook)
useTableConfig(表格组合-hook)
useTableV2Config(表格V2组合-hook)
useZIndex(全局层级-hook)

对话框

1) 基础用法


<template>
  <div>
    <p>弹窗</p>
    <el-button @click="open">默认</el-button>
    <MDialog
      v-model="dialogVisible"
      draggable
      title="这是标题"
      resize
    >
      <div class="u-box">
        <p>这是测试是数据</p>
        <div v-if="showText">
          <p>这是测试是数据</p>
          <p>这是测试是数据</p>
          <p>这是测试是数据</p>
          <p>这是测试是数据</p>
          <p>这是测试是数据</p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >
            确认
          </el-button>
        </div>
      </template>
    </MDialog>

    <p>设置弹窗高(弹框高度为{{ insideHeight }})</p>
    <el-button @click="open2">设置容器高度为300px</el-button>
    <MDialog
      v-model="dialogVisible2"
      draggable
      title="这是标题"
      resize
      v-model:insideHeight="insideHeight"
      @resized="test"
      @opened="opened"
    >
      <div class="u-box j-box">
        <p
          class="u-table j-table"
          :style="'height: ' + height + 'px'"
        >
          useRemainingSpace计算高度{{ height }}
        </p>
        <div>这是干扰元素</div>
        <div class="u-pa">这是绝对<br />定位元素</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible2 = false"
          >
            确认
          </el-button>
        </div>
      </template>
    </MDialog>

    <p>设置弹窗高对话框的最小高度(弹框高度为{{ insideHeight3 }})</p>
    <el-button @click="open3">对话框的最小高度为100px</el-button>
    <MDialog
      v-model="dialogVisible3"
      draggable
      title="这是标题"
      resize
      :minInsideHeight="minInsideHeight"
      :maxInsideHeight="600"
      v-model:insideHeight="insideHeight3"
    >
      <p class="u-box">这是内容-弹框高度为{{ insideHeight3 }}</p>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible3 = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible3 = false"
          >
            确认
          </el-button>
        </div>
      </template>
    </MDialog>

    <p>抽屉模式</p>
    <el-button @click="open4">抽屉模式</el-button>
    <MDialog
      drawerMode
      v-model="dialogVisible4"
      draggable
      title="这是标题"
      width="1000px"
    >
      <div class="u-box">
        <p>这是测试是数据</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible4 = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible4 = false"
          >
            确认
          </el-button>
        </div>
      </template>
    </MDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MDialog } from './../../MDialog'
import { useRemainingSpace } from './../../index'

const dialogVisible = ref<boolean>(false)
const open = () => {
  dialogVisible.value = true
  setTimeout(() => {
    showText.value = true
  }, 3 * 1000)
}
const showText = ref<boolean>(false)

const dialogVisible2 = ref<boolean>(false)
const test = (size: { width: number, height: number }) => {
  console.log('size', size)
}
const { height, init } = useRemainingSpace('j-box', 'j-table')
const opened = () => {
  init()
}
const insideHeight = ref<number>(0)
const open2 = () => {
  insideHeight.value = 300
  dialogVisible2.value = true
}

const dialogVisible3 = ref<boolean>(false)
const insideHeight3 = ref<number>(0)
// const minHeight = ref<number>(0)
const minInsideHeight = ref<number>(0)
const open3 = () => {
  minInsideHeight.value = 100
  dialogVisible3.value = true
}

const dialogVisible4 = ref<boolean>(false)
const open4 = () => {
  dialogVisible4.value = true
}
</script>

<style scoped lang="scss">
.u-box {
  //position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  flex-direction: column;

  .u-table {
    border: 1px solid red;
    box-sizing: border-box;
  }

  .u-pa {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 | |-----------------|:-----------------:|:--------------:|:-----|:---:|:-----------------------------------------------:| | resize | 是否开启拖拽改变大小 | boolean | 否 | - | false | | insideHeight | 对话框内部空间的高度 | number | null | 否 | - | null | | minInsideHeight | 对话框内部空间的最小高度 | number | 否 | - | 0 | | maxInsideHeight | 对话框内部空间的最大高度 | number | 否 | - | Infinity | | insideClassName | 对话框内部空间的className | string | 否 | - | '' | | drawerMode | 抽屉模式 | boolean | 否 | - | false | | 其余参数 | 参考el官网的dialog | - | - | - | https://element-plus.org/zh-CN/component/dialog |

2) Events

| 事件名 | 说明 | 参数 | |---------------------|:-------------:|:------------------------------------------------------:| | resized | 窗口大小改变完成事件 | (contentsSize: { width: number, height: number })内容物大小 | | update:insideHeight | 更新内部容器高度 | (height: number)内部容器高度 | | 其余参数 | 参考el官网的dialog | https://element-plus.org/zh-CN/component/dialog |

筛选

1) 基础用法


<template>
  <div class="g-demo-m-inline-box">
    <m-inline
      size="small"
      :model="formInline"
      :configKey="configKey"
    >
      <template #inlineBtn>
        <el-button
          type="primary"
          size="small"
          icon="Plus"
        >
          新增
        </el-button>
        <el-button
          type="success"
          size="small"
          icon="Edit"
        >
          编辑
        </el-button>
        <el-button
          type="warning"
          size="small"
          icon="Delete"
        >
          删除
        </el-button>
      </template>
      <template #default>
        <el-form
          :model="formInline"
          labelWidth="80px"
          :showMessage="false"
          size="small"
          @submit.prevent
          data-box
        >
          <el-form-item
            label="编码"
            prop="code3"
            data-item
          >
            <el-input
              v-model="formInline.code"
              clearable
              placeholder="请输入编码"
            >
            </el-input>
          </el-form-item>
          <!--<el-form-item-->
          <!--  label="角色名"-->
          <!--  prop="name"-->
          <!--  data-item-->
          <!--&gt;-->
          <!--  <el-input-->
          <!--    v-model="formInline.name"-->
          <!--    clearable-->
          <!--    placeholder="请输入角色名"-->
          <!--  >-->
          <!--  </el-input>-->
          <!--</el-form-item>-->
          <el-form-item
            label="时间"
            prop="time"
            data-item
          >
            <el-input
              v-model="formInline.time"
              clearable
              placeholder="请输入时间"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="类型"
            prop="type"
            data-item
          >
            <el-input
              v-model="formInline.type"
              clearable
              placeholder="请输入类型"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="地区"
            prop="region"
            data-item
          >
            <el-input
              v-model="formInline.region"
              clearable
              placeholder="请输入地区"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="等级"
            prop="level"
            data-item
          >
            <el-input
              v-model="formInline.level"
              clearable
              placeholder="请输入等级"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #submitBtn>
        <el-button
          type="primary"
          icon="Search"
          size="small"
        >
          搜索
        </el-button>
        <el-button
          icon="refresh"
          size="small"
          @click="formInline.reset"
        >
          重置
        </el-button>
      </template>
    </m-inline>
    <p>{{ formInline }}</p>
  </div>
</template>

<script setup lang="ts">
import useFormInline from './../../Hook/useFormInline/useFormInline'

// 列表过滤条件表单
const configKey = 'FormInline'
const formInline = useFormInline<{
  name: string;
  code: string;
  time: string;
  type: string;
  region: string;
  level: string;
}>(configKey, {
  name: '111',
  code: '222',
  time: '333',
  type: '444',
  region: '555',
  level: '666'
})
</script>

<style scoped>
.g-demo-m-inline-box {
  max-width: 1100px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-----------|:-----:|:---------------------------:|:-------------------------:|:-------:| | minWidth | 列最小宽度 | number | - | 200 | | maxWidth | 列最大宽度 | number | - | 300 | | size | 组件尺寸 | enum | large | default | small | default | | configKey | 配置key | string | - | - | | model | 筛选对象 | Record<string, any> | null | - | null |

2) Events

| 事件名 | 说明 | 参数 | |--------|:----------------------:|:---------------:| | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |

数值输入框组件

1) 基础用法


<template>
  <div class="g-demo-m-input-number-box">
    <m-input-number
      v-model="test"
      @input="numberInput"
      @change="numberChange"
    ></m-input-number>
    <h5>对比组</h5>
    <el-input-number
      v-model="test2"
      @input="numberInput2"
      @change="numberChange2"
    ></el-input-number>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const test = ref<number>(0)
const numberInput = (val: number) => {
  console.log('m1', val)
  console.log('m2', test.value)
}
const numberChange = (val: number) => {
  console.log('m3', val)
  console.log('m4', test.value)
}
watch(
  () => test.value,
  () => {
    console.log('m5', test.value)
  }
)

const test2 = ref<number>(0)
const numberInput2 = (val: number) => {
  console.log('e1', val)
  console.log('e2', test2.value)
}
const numberChange2 = (val: number) => {
  console.log('e3', val)
  console.log('e4', test2.value)
}
watch(
  () => test2.value,
  () => {
    console.log('e5', test2.value)
  }
)
</script>

<style scoped>
.g-demo-m-input-number-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------------|:-----------------:|:-------:|:------------------:|:---------:| | value / v-model | 绑定值 | number | - | '' | | min | 设置数值输入框允许的最小值 | number | - | -Infinity | | max | 设置数值输入框允许的最大值 | number | - | Infinity | | step | 数值输入框步长 | number | - | 1 | | step-strictly | 是否只能输入 step 的倍数 | boolean | - | true | | size | 数值输入框尺寸 | string | large, small, mini | - | | disabled | 是否禁用数值输入框 | boolean | - | false | | placeholder | 输入框默认 placeholder | string | - | '' | | thousandth-place | 输入框是否显示千分位 | boolean | - | false | | no-border | 是否不要边框 | boolean | - | false | | no-spacing | 不要边距 | boolean | - | false |

3) Events

| 方法名 | 说明 | 参数 | |--------|:---------------:|:----------------------:| | change | 绑定值被改变时触发 | currentValue, oldValue | | focus | 当 input 获得焦点时触发 | (event: Event) | | blur | 当 input 失去焦点时触发 | (event: Event) |

下拉选择器组件

1) 基础用法


<template>
  <div class="g-demo-m-select-box">
    <m-select
      v-model="test"
      filterable
      checkboxMode
      multiple
    >
      <m-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></m-option>
    </m-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const test = ref<string>('')

const options: Option[] = [{
  label: '这是选项一',
  value: 'a'
}, {
  label: '这是选项二',
  value: 'b'
}]

// const change = (data: any) => {
//   console.log('test', test.value)
//   console.log('data', data)
// }
</script>

<style scoped>
.g-demo-m-select-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------------------------------|:---------------------------------------------------------:|:-------:|:---:|:-----:| | value / v-model | 绑定值 | number | - | '' | | checkbox-mode | 是否为复选框模式（只影响样式） | boolean | - | false | | 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html | - | - | - |

下拉表格选择器

1) 基础用法


<template>
  <div>
    <DemoTest1></DemoTest1>
    <el-divider />
    <DemoTest2></DemoTest2>
    <el-divider />
    <DemoTest3></DemoTest3>
    <el-divider />
    <DemoTest4></DemoTest4>
    <el-divider />
    <DemoTest5></DemoTest5>
    <el-divider />
    <DemoTest6></DemoTest6>
    <el-divider />
    <DemoTest7></DemoTest7>
  </div>
</template>

<script setup lang="ts">
import DemoTest1 from 'packages/MSelectTable/docs/DemoTest1.vue'
import DemoTest2 from 'packages/MSelectTable/docs/DemoTest2.vue'
import DemoTest3 from 'packages/MSelectTable/docs/DemoTest3.vue'
import DemoTest4 from 'packages/MSelectTable/docs/DemoTest4.vue'
import DemoTest5 from 'packages/MSelectTable/docs/DemoTest5.vue'
import DemoTest6 from 'packages/MSelectTable/docs/DemoTest6.vue'
import DemoTest7 from 'packages/MSelectTable/docs/DemoTest7.vue'
</script>

<style>
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选 | 是否必填 | 默认值 | |-------------------|----------------------------------------------------------|-------------------------------------|---------------------------|:----:|---------------------------------| | value / v-model | 绑定值 | number,string, Array<number,string> | - | 否 | '' | | name | 显示值，有值时覆盖所有显示逻辑，直接显示name | number,string, Array<number,string> | - | 否 | '' | | placeholder | 占位符 | string | - | 否 | 请选择 | | disabled | 是否禁用 | boolean | - | 否 | false | | size | 大小 | enum | large | default | small | 否 | default | | options | 下拉表的表内数据,详情见Option接口 | Option[] | - | 否 | [] | | total | 总数量当有值时，出现分页器 | number | null | 否 | null | | filterMethod | 自定义搜索方法 (使用时必须传递filterable) | Function | null | 否 | null | | filterable | 是否开启筛选 (如果开启但没有传递自定义搜索方法效果为筛选当前页数据的 keywords[label]) | boolean | - | 否 | false | | remote | 是否使用远程搜索 | boolean | - | 否 | false | | remoteMethod | 自定义远程搜索方法 (使用时必须传递filterable和remote) | Function | - | 否 | {} | | tableTitle | 下拉表的表头定义,详情见TableTitle接口 | TableTitle[] | - | 否 | [] | | multiple | 是否开启多选 | boolean | - | 否 | false | | keywords | 关键字配置（value-key 配置）映射关键字 | Option | - | 否 | {label: 'label' ,value:'value'} | | reserveSelection | 是否打开翻页多选需要是多选才有效 | boolean | - | 否 | false | | tableHeight | 表格高度 | string | number | 否 | 200 | | isAffirmBtn | 是否有确认按钮当使用此按钮时 selected事件无效需使用selectMultiple事件 | boolean | - | 否 | false | | scrollbarAlwaysOn | 是否常态显示滚动条 | boolean | - | 否 | false | | allowCreate | 是否能够创建条目 | boolean | - | 否 | false | | popupWidth | 弹窗的宽度 | string,number | - | 否 | 500 | | border | 表格边框 | boolean | - | 否 | false | | keywords | 定义默认的 label 和value | { label: string, value: string } | - | 否 | { label: label, value: value } |

Options（选项接口）

| 参数 | 说明 | 类型 | 可选值 | 是否必填 | |---------------------|:---------------------:|:-----------------:|:---:|:----:| | label | 选项的标签，若不设置则默认与value相同 | string | - | 是 | | value | 选项的值 | string | number | - | 是 | | disabled | 是否禁用该选项 | boolean | - | 否 | | [propName: string] | 额外字段 | string | number | - | 否 |

Page (分页对象)

| 参数 | 说明 | 类型 | |------------------|---------|----------| | total | 总数 | number | | pageSize | 分页大小 | number | | currentPage | 页码 | number | | pageSizesOptions | 分页大小可选项 | number[] |

3) events

| 事件名 | 说明 | 回调参数 | |----------------|------------------------------|---------------------------------------------------------------| | selected | 单选或多选之后的回调 | 根据多选和单选的模式不同返回的也有所区别单选为 (value,row) 多选为(values[],rows[]) | | toPage | 当没有使用filterMethod时候才会有回调否则没有 | page 表格分页 | | selectMultiple | 多选确认按钮时的回调配合isAffirmBtn使用 | (values: Array<string | number>, rows: Option[]) | | clear | 用户点击清空按钮时触发 | - | | removeTag | 多选模式下移除tag时触发 | (tag: any) | | selectChange | 勾选数据change事件，选中值不发生变化 | (value: any) |

4) Methods

| 方法名 | 说明 | |----------------------|--------------------------------------------------------------------------| | defaultBackFillValue | 手动重载反填使用场景当前开启多选并且开启翻页多选的时候这个时候需要默认反填上值的话需要赋值之后延迟调用此方法其余场景为默认反填 | | clear | 清空已选择 | | focus | 聚焦下拉框 |

filterMethod

| 返回值 | 类型 | 说明 | |-------------|--------|--------| | searchValue | string | 返回输入的值 | | Page | Page | 整个分页类 |

remoteMethod

| 返回值 | 类型 | 说明 | |-------------|--------|--------| | searchValue | string | 返回输入的值 | | Page | Page | 整个分页类 |

slots（插槽）

| 插槽名 | 描述 | |-----------|-------------------| | auxiliary | 在表格选择器头部位置的辅助信息插槽 |

下拉表格选择器（旧版，只做维护不更新）

1) 基础用法


<template>
  <div class="g-m-select-table-box">
    <m-select-table-v1
      v-model="code"
      placeholder="请选择单号"
      :remoteMethod="remoteMethod"
      :options="options"
      :tableTitle="commodityOptionsTitle"
      focusShow
      clearable
      @clear="clearCall"
    ></m-select-table-v1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Page } from '../../typings/class'

const code = ref<string>('')
const options = ref<Option[]>()
const commodityOptionsTitle: TableTitle[] = [{
  prop: 'sn',
  label: '单号'
}, {
  prop: 'fileName',
  label: '文件名'
}, {
  prop: 'createdUserName',
  label: '上传者'
}, {
  prop: 'createdTimeStr',
  label: '上传时间'
}]

const mockData = [{
  sn: 'SC201564981241',
  fileName: '测试文件1.zip',
  createdUserName: '绫波丽',
  createdTimeStr: '2024-05-06'
}, {
  sn: 'SC201564981242',
  fileName: '测试文件2.zip',
  createdUserName: '绫波丽',
  createdTimeStr: '2024-05-06',
  disabled: true
}, {
  sn: 'SC201564981243',
  fileName: '测试文件3.zip',
  createdUserName: '绫波丽',
  createdTimeStr: '2024-05-06'
}, {
  sn: 'SC201564981244',
  fileName: '测试文件4.zip',
  createdUserName: '绫波丽',
  createdTimeStr: '2024-05-06'
}]
const clearCall = (e: any) => {
  console.log(e)
  console.log('!@#@#')
}
const remoteMethod = async (query: string = '', page: Page) => {
  console.log('query', query)
  console.log('page', page)
  options.value = mockData.map(item => ({
    label: item.fileName,
    value: item.sn,
    sn: item.sn,
    fileName: item.fileName,
    createdUserName: item.createdUserName,
    createdTimeStr: item.createdTimeStr,
    disabled: item.disabled
  }))
}
</script>

<style lang="scss">
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------------------|:------------------------:|:--------:|:--------------------:|:-------:| | value / v-model | 绑定值 | string | number | - | '' | | placeholder | 输入框默认 placeholder | string | - | '' | | disabled | 是否禁用 | boolean | - | false | | size | 数值输入框尺寸 | string | 'large', 'small', '' | '' | | options | 选项内容，详情见Options接口 | Option[] | - | [] | | total | 总数据量，当有值时，出现分页器 | number | null | - | | remoteMethod | 自定义远程搜索方法 | Function | - | - | | tableTitle | 表格标题配置 | any[] | - | [] | | isSelect | 是否多选 | boolean | - | false | | allowCreate | 是否允许用户创建新条目 | boolean | - | false | | focusShow | 是否聚焦显示（既，当搜索值为空时是否显示选择器） | - | false | - | | clearable | 是否可以清空选项 | boolean | - | false | | scrollbarAlwaysOn | 总是显示滚动条 | boolean | - | - | | labelKey | label映射key | string | - | 'label' |

Options（选项接口）

3) Events

| 方法名 | 说明 | 参数 | |----------------|:-----------:|:---------------------:| | selectMultiple | 多选确认按钮点击时触发 | selectedRow(所选行构成的数组) | | change | 绑定值被改变时触发 | value | | selected | 单选模式点击行时触发 | selectedRow（所选行） | | clear | 清空选择之后回调 | - |

下拉选择器V2组件

1) 基础用法


<template>
  <div class="g-demo-m-select-box">
    <m-select-v2
      v-model="test"
      checkboxMode
      multiple
      :options="options"
      showAll
    >
    </m-select-v2>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const test = ref<string[]>([])

const options: Option[] = [{
  label: '这是选项一',
  value: 'a'
}, {
  label: '这是选项二',
  value: 'b'
}, {
  label: '这是选项三',
  value: 'c',
  disabled: true
}]
</script>

<style scoped>
.g-demo-m-select-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------------------------------|:---------------------------------------------------------:|:--------:|:---:|:-----:| | value / v-model | 绑定值 | number | - | '' | | checkbox-mode | 是否为复选框模式（只影响样式） | boolean | - | false | | multiple | 是否多选 | boolean | - | false | | show-all | 是否显示全选选项（只在multiple为true时生效） | boolean | - | false | | options | 选项值 | Option[] | - | [] | | 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html | - | - | - |

Option（选项对象）

| 参数 | 说明 | 类型 | 必填 | 可选值 | 默认值 | |----------|:---------------------:|:-------:|:--:|:---:|:-----:| | label | 选项的标签，若不设置则默认与value相同 | string | 否 | - | - | | value | 选项的值 | number | 是 | - | - | | disabled | 是否禁用该选项 | boolean | 否 | - | false |

表格组件

1) 基础用法


<template>
  <div class="g-box">
    <DemoTest1></DemoTest1>
    <el-divider />

    <DemoTest2></DemoTest2>
    <el-divider />

    <DemoTest3></DemoTest3>
    <el-divider />

    <DemoTest4></DemoTest4>
    <el-divider />

    <DemoTest5></DemoTest5>
    <el-divider />

    <DemoTest6></DemoTest6>
    <el-divider />

    <DemoTest7></DemoTest7>
    <el-divider />

    <DemoTest8></DemoTest8>
    <el-divider />

    <DemoTest9></DemoTest9>
    <el-divider />

    <DemoTest10></DemoTest10>
    <el-divider />
  </div>
</template>

<script setup lang="ts">
import DemoTest1 from 'packages/MTable/docs/DemoTest1.vue'
import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
import DemoTest6 from 'packages/MTable/docs/DemoTest6.vue'
import DemoTest7 from 'packages/MTable/docs/DemoTest7.vue'
import DemoTest8 from 'packages/MTable/docs/DemoTest8.vue'
import DemoTest9 from 'packages/MTable/docs/DemoTest9.vue'
import DemoTest10 from 'packages/MTable/docs/DemoTest10.vue'
</script>

<style lang="scss" scoped>
.g-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|-----------------------------|-------------------------------------------------|-----|-----------------------------------------------------| | data | 表格的数据 | Record<string, any>[] | - | [ ] | | sole | 行的唯一值 | String , number | - | key | | filtersValue | 表格内容筛选(当为null时，不显示筛选图标) | Record<string, Array<string | number>> | null | - | null | | expandProp | 展开图标列(如使用这个属性则必须存在rowKey属性) | string | - | '' | | tableConfigKey | 表格配置key | string | - | '' | | selectionCell | 选中列 | string | - | '' | | circleTotal | 是否圈选合计 | boolean | - | true | | isCircleCopy | 是否启用圈选复制 | boolean | - | true | | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |

要求

sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字

3) Events

| 方法名 | 说明 | 回调参数 | |----------------------|--------------------------------------|-----------------------------------------------------| | pasteData | 表格粘贴方法 | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData | | update:tableConfig | 表格配置更新 | [tableConfig: TableConfig] | | privateExpandChange | expandProp模式下当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]] | | update:selectionCell | 选中单元格更新 | [string] | | 其余方法 | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |

4) Exposes

| 方法名 | 说明 | 回调参数 | |---------------|--------------|-----------------------------------------------------| | getTableTitle | 获取表格头信息 | tableTitle: TableTitle[] | | 其余方法 | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |

5) PasteAction

| 参数 | 说明 | 类型 | |------------|----------------------------------------|-------------------------| | editRow | 返回粘贴的对应行的原始数据 | Record<string, any> | | editColumn | 返回粘贴时鼠标所在列的表格prop值 | String | | arr | 返回粘贴时候处理之后的数组信息 | Array<string | number> | | rowIndex | 根据sole的值去data内查找当前操作的粘贴行在data内的序号 | number |

5) MBatchEdit（批量编辑组件）

1) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|-------------------------------------------|---------------------------------------------------------------|--------------------------|------| | selectionCell | 选中列 | string | - | '' | | size | 组件大小 | string | 'small' | 'large' | '' | '' | | tableData | 表格数据 | Record<string, any>[] | - | [] | | tableTitle | 表格列配置 | TableTitle[] | null | - | null | | relevancyTable | 关联表格（与tableTitle属性互斥，同时存在时只有tableTitle生效） | InstanceType<typeof import('packages/MTable').MTable> | null | - | null |

2) Events

| 方法名 | 说明 | 回调参数 | |------------------|--------|---------------------------------| | update:tableData | 表格数据更新 | [data: Record<string, any>[]] |

表格列组件

1) 基础用法


<template>
  <div class="g-box">
    <el-table :data="tableData">
      <MTableColumn
        v-for="item in tableTitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :minWidth="item.minWidth"
        v-model:filtersValue="filtersValue"
        showOverflowTooltip
        :children="item.children || []"
      >
      </MTableColumn>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface FilterValue {
  [key: string]: Array<string | number>
}
const filtersValue = ref<FilterValue>({})
interface User {
  date: string;
  name: string;
  address: string;
  tag: string;
}
const tableData = ref<User[]>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  }
])
const tableTitle = [
  {
    label: '日期',
    prop: 'date',
    minWidth: '172px'
  },
  {
    label: '名称',
    prop: 'name',
    minWidth: '134px'
  },
  {
    label: '地址',
    children: [
      {
        label: '123',
        children: [
          {
            label: '222222222222',
            prop: 'address',
            minWidth: '134px'

          },
          {
            label: 'qqqqqq',
            prop: 'address',
            minWidth: '134px'

          }
        ]
      },
      {
        label: '2222',
        prop: 'address',
        minWidth: '134px'
      }
    ]

  },
  {
    label: '标签',
    prop: 'tag',
    minWidth: '134px'
  }
]
</script>

<style scoped lang="scss">
.g-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------|--------------------------|--------------------|-----|-----------------------------------------------------| | filtersValue | 列筛选过滤条件(当为null时，不显示筛选图标) | object | null | - | null | | filters | 表格筛选数据 | string[],number[] | - | any[] | | filterMethod | 筛选方法 | Function | - | () => void | | children | 多级表头时使用传递对应数据进行循环 | Table-column API[] | - | [] | | isBatchEdit | 是否允许批改 | boolean | - | false | | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |

表格头设置组件

1) 基础用法


<template>
  <div>
    <MTableColumnSet
      v-model="tableConfig"
      tableConfigKey="tableConfigKey"
    />
    <div>
      {{ tableConfig }}
    </div>
    <!--<p @click="test = !test">ddd</p>-->
    <!--<m-dialog v-model="test"></m-dialog>-->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// const test = ref<boolean>(false)

const tableConfig = ref({
  date: {
    minWidth: 100,
    show: true,
    sort: 0,
    label: 'date'
  },
  name: {
    minWidth: 100,
    show: true,
    sort: 1,
    label: 'name'
  },
  address: {
    minWidth: 100,
    show: true,
    sort: 2,
    label: 'address'
  }
})

</script>

<style lang="scss"></style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-----------------------|---------------------------------|------------------------------------------|-----|-------| | model-value / v-model | 绑定值 | { [propName: string]: TableConfigItem } | - | {} | | link | 是否为链接按钮 | boolean | - | false | | foldMode | 是否开启折叠开启的话需要父级元素为flex布局/grid布局 | boolean | - | false | | tableConfigKey | 表格配置key | string | - | '' |

useMTableColumnSet（皮肤对象）

| 返回值 | 说明 | 类型 | 可选值 | 默认值 | |-----------|:----:|:--------------------------------:|:---:|:---:| | setConfig | 设置配置 | (path: string, routerObj: any) | - | - | | toPath | 跳转页面 | (tableConfigKey: string) => void | - | - |

3) TableConfigItem

| 参数 | 说明 | 类型 | |-------------|---------------------------|----------------------------| | minWidth | 最小列宽 | number,string | | show | 是否显示 | boolean | | sort | 排序 | number | | label | 列名 | string | | headerAlign | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | 'left' ,'center' , 'right' |

整合表格组件

1) 基础用法


<template>
  <div class="g-box">
    <h3>基础功能</h3>
    <MTableSuper
      :data="tableData"
      v-if="!tableData"
      border
    >
      <MTableColumn
        v-for="item in tableTitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :minWidth="item.minWidth"
        :className="item.className"
        :filters="item.filters"
        :headerAlign="item.headerAlign"
        :fixed="item.fixed"
        v-model:filtersValue="filtersValue"
        showOverflowTooltip
      ></MTableColumn>
    </MTableSuper>
    <h3>带选择的表格</h3>
    <MTableSuper
      :data="tableData"
      border
    >
      <el-table-column
        fixed="left"
        type="selection"
      />
      <el-table-column
        prop="name"
        label="名称"
      >
        <el-table-column
          prop="date"
          label="时间"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        ></el-table-column>
      </el-table-column>
      <MTableColumn
        v-for="item in tableTitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :minWidth="item.minWidth"
        :className="item.className"
        :filters="item.filters"
        :headerAlign="item.headerAlign"
        :fixed="item.fixed"
        v-model:filtersValue="filtersValue"
        showOverflowTooltip
      >
      </MTableColumn>
    </MTableSuper>
    <h3>展开列</h3>
    <MTableSuper
      v-if="!tableData"
      class="style.box"
      :data="tableData"
      border
      :filtersValue="filtersValue"
      scrollbarAlwaysOn
      v-model:tableConfig="tableConfig"
      rowKey="id"
      tableConfigKey="tableConfigKey"
      @headerDragend="headerDragend"
      expandProp="sn"
      @privateExpandChange="privateExpandChange"
    >
      <el-table-column
        fixed="left"
        type="selection"
      />
      <MTableColumn
        type="expand"
        width="1"
      >
        <template #default="props">
          <h1>index{{ props.index }}</h1>
          <h1>$index{{ props.$index }}</h1>
          <h1>测试</h1>
        </template>
      </MTableColumn>
      <MTableColumn
        v-for="item in tableTitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :minWidth="item.minWidth"
        :className="item.className"
        :filters="item.filters"
        :headerAlign="item.headerAlign"
        :fixed="item.fixed"
        v-model:filtersValue="filtersValue"
        showOverflowTooltip
      >
      </MTableColumn>
    </MTableSuper>
    <h3>树状表格</h3>
    <MTableSuper
      v-if="!tableData"
      class="style.box"
      :data="tableData"
      border
      @headerDragend="headerDragend"
      :filtersValue="filtersValue"
      scrollbarAlwaysOn
      v-model:tableConfig="tableConfig"
      rowKey="id"
      tableConfigKey="tableConfigKey"
      @expandChange="privateExpandChange"
    >
      <MTableColumn
        v-for="item in tableTitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :minWidth="item.minWidth"
        :className="item.className"
        :filters="item.filters"
        :headerAlign="item.headerAlign"
        :fixed="item.fixed"
        v-model:filtersValue="filtersValue"
        showOverflowTooltip
      >
      </MTableColumn>
    </MTableSuper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useTableConfig } from './../../index'
import { MTableColumn } from './../../MTableColumn'

const privateExpandChange = (row: any, expandedRows: any[]) => {
  console.log('row', row)
  console.log('expandedRows', expandedRows)
}

// const test = (data: any) => {
//   console.log('data', data)
// }

const tableData = ref<any[]>([])
const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
  label: '序号',
  prop: 'sn',
  minWidth: 200
  // fixed: 'right'
}, {
  label: '时间',
  prop: 'date',
  minWidth: 200
  // fixed: 'left'
}, {
  label: '地址',
  prop: 'address',
  minWidth: 200
}, {
  label: '名称',
  prop: 'name',
  minWidth: 200
}], tableData)
console.log('tableTitle', tableTitle.value)

tableData.value = [{
  id: 1,
  sn: 1,
  date: '2016-05-03',
  name: 'Tom1',
  address: 'No. 189',
  tag: 'Home',
  pid: 0
}, {
  id: 2,
  sn: 2,
  date: '2016-05-02',
  name: 'Tom2',
  address: 'No. 189, Grove St, Los Angeles',
  tag: 'Office',
  pid: 0,
  children: [{
    id: 21,
    sn: 1,
    date: '2016-05-02',
    name: 'Tom21',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  }, {
    id: 22,
    sn: 2,
    date: '2016-05-02',
    name: 'Tom22',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  }]
}, {
  id: 3,
  sn: 3,
  date: '2016-05-04',
  name: 'Tom3',
  address: 'No. 189',
  tag: 'Home',
  pid: 0
}, {
  id: 4,
  sn: 4,
  date: '2016-05-01',
  name: 'Tom4',
  address: 'No. 189, Grove St, Los Angeles',
  tag: 'Office',
  pid: 0
}, {
  id: 5,
  sn: 5,
  date: '2016-05-05',
  name: 'Tom4',
  address: 'No. 189, Grove St, Los Angeles',
  tag: 'Office',
  pid: 0
}, {
  id: 6,
  sn: 6,
  date: '2016-06-01',
  name: 'Tom4',
  address: 'No. 189, Grove St, Los Angeles',
  tag: 'Office',
  pid: 0
}]
</script>

<style lang="scss" scoped>
.g-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|-----------------------------|------------------|-----|-----------------------------------------------------| | data | 表格的数据 | Array | - | [ ] | | sole | 行的唯一值 | String , number | - | key | | filtersValue | 表格内容筛选(当为null时，不显示筛选图标) | Function | null | - | null | | expandProp | 展开图标列(如使用这个属性则必须存在rowKey属性) | string | - | '' | | tableConfigKey | 表格配置key | string | - | '' | | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |

要求

sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字

3) Events

| 方法名 | 说明 | 回调参数 | |---------------------|--------------------------------------|-----------------------------------------------------| | pasteData | 表格粘贴方法 | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData | | update:tableConfig | 表格配置更新 | [tableConfig: TableConfig] | | privateExpandChange | expandProp模式下当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]] | | 其余方法 | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |

4) PasteAction

| 参数 | 说明 | 类型 | |------------|----------------------------------------|--------| | editRow | 返回粘贴的对应行的原始数据 | Object | | editColumn | 返回粘贴时鼠标所在列的表格prop值 | String | | arr | 返回粘贴时候处理之后的数组信息 | Array | | rowIndex | 根据sole的值去data内查找当前操作的粘贴行在data内的序号 | number |

虚拟化表格

1) 基础用法


<template>
  <div class="g-box">
    <p @click="test">{{ tableConfig }}</p>
    <MTableV2
      :data="tableData"
      :columns="tableTitle"
      :height="500"
      border
      fixed
      v-model:tableConfig="tableConfig"
      tableConfigKey="MTableV2Demo"
    ></MTableV2>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useTableV2Config from './../../Hook/useTableV2Config/useTableV2Config'

const tableData = ref<any[]>([])
const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
  title: '序号',
  key: 'sn',
  dataKey: 'sn',
  width: 300
}, {
  title: '时间',
  key: 'date',
  dataKey: 'date',
  width: 300
}, {
  title: '地址',
  key: 'address',
  dataKey: 'address',
  width: 300
}, {
  title: '名称',
  key: 'name',
  dataKey: 'name',
  width: 300
}], tableData)

const test = () => {
  filtersValue.value = {}
}
for (let i = 0; i < 1000; i++) {
  tableData.value.push({
    id: i,
    sn: 'sn' + i,
    date: 'date' + i,
    address: 'address' + i,
    name: 'name' + i
  })
}
</script>

<style lang="scss" scoped>
.g-box {
  max-width: 1000px;
}
</style>

2) Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------| | size | 尺寸 | string | small | large | default | default | | data | 要在表中渲染的数据数组 | any[] | - | [] | | columns | 表格列配置 | TableV2Title[] | - | [] | | filtersValue | 表格内容筛选(当为null时，不显示筛选图标) | FilterValue | null | - | null | | tableConfig | 表格配置 | TableConfig | null | - | null | | tableConfigKey | 表格配置key | string | - | '' | | fixed | 单元格宽度是自适应还是固定 | boolean | - | false | | estimatedRowHeight | 渲染动态的单元格的预估高度 | number | null | - | null | | headerHeight | Header 的高度由height设置。如果传入数组，它会使 header row 等于数组长度 | number | number[] | null | - | null | | cellWidthAdaptive | 单元格宽度自适应 | boolean | - | false | | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |

3) Events

| 方法名 | 说明 | 回调参数 | |--------------------|--------------|-----------------------------------------------------------------------------------| | update:tableConfig | 表格配置更新 | [tableConfig: TableConfig] | | 其余方法 | 参考el官网的table | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E4%BA%8B%E4%BB%B6 |

4) TableV2Title

| 参数 | 说明 | 类型 | |--------------------|------------------------------------------------------------------------------------|-------------------------------| | title | 显示的标题 | string | | key | 唯一标志 | string | | dataKey | data 的唯一标志符 | string | | align | 表格单元格内容对齐方式 | 'right' | 'left' | 'center' | | class | 列的类名 | string | | fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | true | 'left' | 'right' | | headerClass | 自定义 header 头部类名 | string | | hidden | 此列是否不可见 | boolean | | style | 自定义列单元格的类名，将会与 gird 单元格合并 | object | | minWidth | 对应列的最小宽度，对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | number | string | | maxWidth | 对应列的列的最大宽度 | number | string | | width | 对应列的宽度 | number | string | | cellRenderer | 自定义单元格渲染器 | any | | headerCellRenderer | 自定义头部渲染器 | any |

皮肤设置

1) 基础用法


<template>
  <div class="g-demo-skin-config-box">
    <SkinConfig
      ref="shinConfigRef"
      @change="size = $event.size"
    ></SkinConfig>

    <p>skin: {{ skin.skinConfig }}</p>
    <div class="m-box">
      <div class="u-color-box">
        <h3>色卡</h3>
        <ul>
          <li
            class="u-li"
            v-for="(item, index) in list"
            :key="index"
            :class="item.className"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="u-el">
        <h3>元素</h3>
        <div>
          <el-button :size="size">Default</el-button>
          <el-button
            type="primary"
            :size="size"
          >
            Primary
          </el-button>
          <el-button
            type="success"
            :size="size"
          >
            Success
          </el-button>
          <el-button
            type="info"
            :size="size"
          >
            Info
          </el-button>
          <el-button
            type="warning"
            :size="size"
          >
            Warning
          </el-button>
          <el-button
            type="danger"
            :size="size"
          >
            Danger
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { SkinConfig } from './../../SkinConfig'
import useSkin from './../src/useSkin'

const skin = useSkin()
const size = ref<string>('')
const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
onMounted(() => {
  const config = shinConfigRef.value ? shinConfigRef.value.getSkin() : null
  if (config) size.value = config.size
})

const list = ref<{ name: string, className: string }[]>([
  {
    name: '--el-color-primary',
    className: 'el-color-primary'
  },
  {
    name: '--el-color-primary-light-3',
    className: 'el-color-primary-light-3'
  },
  {
    name: '--el-color-primary-light-5',
    className: 'el-color-primary-light-5'
  },
  {
    name: '--el-color-primary-light-7',
    className: 'el-color-primary-light-7'
  },
  {
    name: '--el-color-primary-light-8',
    className: 'el-color-primary-light-8'
  },
  {
    name: '--el-color-primary-light-9',
    className: 'el-color-primary-light-9'
  },
  {
    name: '--el-color-primary-dark-2',
    className: 'el-color-primary-dark-2'
  },
  {
    name: '--el-color-success',
    className: 'el-color-success'
  },
  {
    name: '--el-color-success-light-3',
    className: 'el-color-success-light-3'
  },
  {
    name: '--el-color-success-light-5',
    className: 'el-color-success-light-5'
  },
  {
    name: '--el-color-success-light-7',
    className: 'el-color-success-light-7'
  },
  {
    name: '--el-color-success-light-8',
    className: 'el-color-success-light-8'
  },
  {
    name: '--el-color-success-light-9',
    className: 'el-color-success-light-9'
  },
  {
    name: '--el-color-success-dark-2',
    className: 'el-color-success-dark-2'
  },
  {
    name: '--el-color-warning',
    className: 'el-color-warning'
  },
  {
    name: '--el-color-warning-light-3',
    className: 'el-color-warning-light-3'
  },
  {
    name: '--el-color-warning-light-5',
    className: 'el-color-warning-light-5'
  },
  {
    name: '--el-color-warning-light-7',
    className: 'el-color-warning-light-7'
  },
  {
    name: '--el-color-warning-light-8',
    className: 'el-color-warning-light-8'
  },
  {
    name: '--el-color-warning-light-9',
    className: 'el-color-warning-light-9'
  },
  {
    name: '--el-color-warning-dark-2',
    className: 'el-color-warning-dark-2'
  },
  {
    name: '--el-color-danger',
    className: 'el-color-danger'
  },
  {
    name: '--el-color-danger-light-3',
    className: 'el-color-danger-light-3'
  },
  {
    name: '--el-color-danger-light-5',
    className: 'el-color-danger-light-5'
  },
  {
    name: '--el-color-danger-light-7',
    className: 'el-color-danger-light-7'
  },
  {
    name: '--el-color-danger-light-8',
    className: 'el-color-danger-light-8'
  },
  {
    name: '--el-color-danger-light-9',
    className: 'el-color-danger-light-9'
  },
  {
    name: '--el-color-danger-dark-2',
    className: 'el-color-danger-dark-2'
  },
  {
    name: '--el-color-error',
    className: 'el-color-error'
  },
  {
    name: '--el-color-error-light-3',
    className: 'el-color-error-light-3'
  },
  {
    name: '--el-color-error-light-5',
    className: 'el-color-error-light-5'
  },
  {
    name: '--el-color-error-light-7',
    className: 'el-color-error-light-7'
  },
  {
    name: '--el-color-error-light-8',
    className: 'el-color-error-light-8'
  },
  {
    name: '--el-color-error-light-9',
    className: 'el-color-error-light-9'
  },
  {
    name: '--el-color-error-dark-2',
    className: 'el-color-error-dark-2'
  },
  {
    name: '--el-color-info',
    className: 'el-color-info'
  },
  {
    name: '--el-color-info-light-3',
    className: 'el-color-info-light-3'
  },
  {
    name: '--el-color-info-light-5',
    className: 'el-color-info-light-5'
  },
  {
    name: '--el-color-info-light-7',
    className: 'el-color-info-light-7'
  },
  {
    name: '--el-color-info-light-8',
    className: 'el-color-info-light-8'
  },
  {
    name: '--el-color-info-light-9',
    className: 'el-color-info-light-9'
  },
  {
    name: '--el-color-info-dark-2',
    className: 'el-color-info-dark-2'
  },
  {
    name: '--el-box-shadow',
    className: 'el-box-shadow'
  },
  {
    name: '--el-box-shadow-light',
    className: 'el-box-shadow-light'
  },
  {
    name: '--el-box-shadow-lighter',
    className: 'el-box-shadow-lighter'
  },
  {
    name: '--el-box-shadow-dark',
    className: 'el-box-shadow-dark'
  },
  {
    name: '--el-bg-color-page',
    className: 'el-bg-color-page'
  },
  {
    name: '--el-bg-color',
    className: 'el-bg-color'
  },
  {
    name: '--el-bg-color-overlay',
    className: 'el-bg-color-overlay'
  },
  {
    name: '--el-text-color-primary',
    className: 'el-text-color-primary'
  },
  {
    name: '--el-text-color-regular',
    className: 'el-text-color-regular'
  },
  {
    name: '--el-text-color-secondary',
    className: 'el-text-color-secondary'
  },
  {
    name: '--el-text-color-placeholder',
    className: 'el-text-color-placeholder'
  },
  {
    name: '--el-text-color-disabled',
    className: 'el-text-color-disabled'
  },
  {
    name: '--el-border-color-darker',
    className: 'el-border-color-darker'
  },
  {
    name: '--el-border-color-dark',
    className: 'el-border-color-dark'
  },
  {
    name: '--el-border-color',
    className: 'el-border-color'
  },
  {
    name: '--el-border-color-light',
    className: 'el-border-color-light'
  },
  {
    name: '--el-border-color-lighter',
    className: 'el-border-color-lighter'
  },
  {
    name: '--el-border-color-extra-light',
    className: 'el-border-color-extra-light'
  },
  {
    name: '--el-fill-color-darker',
    className: 'el-fill-color-darker'
  },
  {
    name: '--el-fill-color-dark',
    className: 'el-fill-color-dark'
  },
  {
    name: '--el-fill-color',
    className: 'el-fill-color'
  },
  {
    name: '--el-fill-color-light',
    className: 'el-fill-color-light'
  },
  {
    name: '--el-fill-color-lighter',
    className: 'el-fill-color-lighter'
  },
  {
    name: '--el-fill-color-extra-light',
    className: 'el-fill-color-extra-light'
  },
  {
    name: '--el-fill-color-blank',
    className: 'el-fill-color-blank'
  },
  {
    name: '--el-mask-color',
    className: 'el-mask-color'
  },
  {
    name: '--el-mask-color-extra-light',
    className: 'el-mask-color-extra-light'
  }
])
</script>

<style lang="scss">
:root[data-dark="true"] {
  color-scheme: dark;
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #3375b9;
  --el-color-primary-light-5: #2a598a;
  --el-color-primary-light-7: #213d5b;
  --el-color-primary-light-8: #1d3043;
  --el-color-primary-light-9: #18222c;
  --el-color-primary-dark-2: #66b1ff;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #4e8e2f;
  --el-color-success-light-5: #3e6b27;
  --el-color-success-light-7: #2d481f;
  --el-color-success-light-8: #25371c;
  --el-color-success-light-9: #1c2518;
  --el-color-success-dark-2: #85ce61;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #a77730;
  --el-color-warning-light-5: #7d5b28;
  --el-color-warning-light-7: #533f20;
  --el-color-warning-light-8: #3e301c;
  --el-color-warning-light-9: #292218;
  --el-color-warning-dark-2: #ebb563;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #b25252;
  --el-color-danger-light-5: #854040;
  --el-color-danger-light-7: #582e2e;
  --el-color-danger-light-8: #412626;
  --el-color-danger-light-9: #2b1d1d;
  --el-color-danger-dark-2: #f78989;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;
  --el-color-info: #909399;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #2d2d2f;
  --el-color-info-light-9: #202121;
  --el-color-info-dark-2: #a6a9ad;

  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-text-color-secondary: #A3A6AD;
  --el-text-color-placeholder: #8D9095;
  --el-text-color-disabled: #6C6E72;
  --el-border-color-darker: #636466;
  --el-border-color-dark: #58585B;
  --el-border-color: #4C4D4F;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2B2B2C;
  --el-fill-color-darker: #424243;
  --el-fill-color-dark: #39393A;
  --el-fill-color: #303030;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1D1D1D;
  --el-fill-

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

霸软业务组件库

组件列表

对话框

1) 基础用法

2) Attributes

2) Events

筛选

1) 基础用法

2) Attributes

2) Events

数值输入框组件

1) 基础用法

2) Attributes

3) Events

下拉选择器组件

1) 基础用法

2) Attributes

下拉表格选择器

1) 基础用法

2) Attributes

Options（选项接口）

Page (分页对象)

3) events

4) Methods

filterMethod

remoteMethod

slots（插槽）

下拉表格选择器（旧版，只做维护不更新）

1) 基础用法

2) Attributes

Options（选项接口）

3) Events

下拉选择器V2组件

1) 基础用法

2) Attributes

Option（选项对象）

表格组件

1) 基础用法

2) Attributes

要求

3) Events

4) Exposes

5) PasteAction

5) MBatchEdit（批量编辑组件）

1) Attributes

2) Events

表格列组件

1) 基础用法

2) Attributes

表格头设置组件

1) 基础用法

2) Attributes

useMTableColumnSet（皮肤对象）

3) TableConfigItem

整合表格组件

1) 基础用法

2) Attributes

要求

3) Events

4) PasteAction

虚拟化表格

1) 基础用法

2) Attributes

3) Events

4) TableV2Title

皮肤设置

1) 基础用法