xt-element-ui 1.3.4 → 2.0.0

package/docs/components/base/xt-select-tree.md

@@ -0,0 +1,141 @@
+## XtSelectTree 下拉选择树组件
+
+下拉选择树组件，基于 ElementUI Tree 封装，支持单选、多选、懒加载等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        {
+          label: '一级菜单',
+          value: 1,
+          children: [
+            { label: '二级菜单1', value: 11 },
+            { label: '二级菜单2', value: 12 }
+          ]
+        },
+        { label: '二级菜单', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` / `v-model` | String / Number / Array | - | 选中值，多选时为数组 |
+| `data` | Array | `[]` | 树数据 |
+| `props` | Object | `{ value: 'value', label: 'label', children: 'children' }` | 数据属性映射 |
+| `multiple` | Boolean | `false` | 是否多选 |
+| `filterable` | Boolean | `true` | 是否可搜索 |
+| `clearable` | Boolean | `false` | 是否可清空 |
+| `disabled` | Boolean | `false` | 是否禁用 |
+| `checkStrictly` | Boolean | `false` | 是否严格父子节点选择 |
+| `defaultExpandAll` | Boolean | `false` | 是否默认展开所有节点 |
+| `lazy` | Boolean | `false` | 是否懒加载 |
+| `load` | Function | - | 懒加载函数 |
+| `placement` | String | `bottom-start` | 弹出位置 |
+| `placeholder` | String | `请选择` | 占位提示 |
+
+## 示例
+
+### 多选模式
+
+::: demo 多选模式
+```vue
+<template>
+  <XtSelectTree v-model="selectedValues" :data="treeData" multiple />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValues: [],
+      treeData: [
+        {
+          label: '部门A',
+          value: 1,
+          children: [
+            { label: '员工1', value: 11 },
+            { label: '员工2', value: 12 }
+          ]
+        },
+        { label: '部门B', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可搜索
+
+::: demo 可搜索
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" filterable />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        { label: '张三', value: 1 },
+        { label: '李四', value: 2 },
+        { label: '王五', value: 3 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可清空
+
+::: demo 可清空
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" clearable />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        { label: '选项1', value: 1 },
+        { label: '选项2', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 选中值改变时触发 | `value`, `node` |
+| `clear` | 清空时触发 | - |

package/docs/components/base/xt-table.md

@@ -0,0 +1,344 @@
+## XtTable 扩展表格组件
+
+基于 ElementUI Table 封装的扩展表格组件，支持虚拟滚动、小计/总计、合并单元格等高级功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtTable
+    :table-data="tableData"
+    :columns="columns"
+    title="用户列表"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '张三', age: 25, city: '北京' },
+        { name: '李四', age: 30, city: '上海' },
+        { name: '王五', age: 28, city: '广州' }
+      ],
+      columns: [
+        { prop: 'name', label: '姓名' },
+        { prop: 'age', label: '年龄' },
+        { prop: 'city', label: '城市' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+### 基础属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `tableData` | Array | `[]` | 表格数据 |
+| `columns` | Array | `[]` | 列配置 |
+| `title` | String | `''` | 表格标题 |
+| `height` | Number / String | - | 表格高度 |
+| `maxHeight` | Number / String | - | 最大高度 |
+| `showIndex` | Boolean | `false` | 是否显示序号列 |
+| `selection` | Boolean | `false` | 是否显示选择列 |
+| `selectionFixed` | Boolean / String | `false` | 选择列是否固定 |
+| `indexFixed` | Boolean / String | `false` | 序号列是否固定 |
+| `loading` | Boolean | `false` | 是否加载中 |
+| `emptyText` | String | `暂无数据` | 空数据提示 |
+
+### 虚拟滚动
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `virtualScroll` | Boolean | `false` | 是否启用虚拟滚动 |
+| `rowInitHeight` | Number | `48` | 行初始高度 |
+| `bufferSize` | Number | `5` | 缓冲区行数 |
+
+### 小计/总计
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `groupColumns` | Array | `[]` | 合并单元格的列字段 |
+| `subtotalConfig` | Object | `{ enabled: false }` | 小计配置 |
+| `totalConfig` | Object | `{ enabled: false }` | 总计配置 |
+
+### 分页
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `pagination` | Object | `null` | 分页配置 |
+| `total` | Number | `0` | 数据总数 |
+
+## 列配置说明
+
+```javascript
+{
+  prop: 'name',           // 字段名
+  label: '姓名',          // 列标题
+  width: 100,            // 宽度
+  fixed: true,           // 是否固定
+  align: 'center',       // 对齐方式
+  sortable: true,        // 是否可排序
+  render: (scope) => {}, // 自定义渲染函数
+  formatter: (row, col) => {}, // 格式化函数
+  slot: 'custom-slot',    // 自定义插槽名
+  children: []           // 多级表头
+}
+```
+
+## 示例
+
+### 虚拟滚动
+
+::: demo 虚拟滚动
+```vue
+<template>
+  <XtTable
+    :table-data="largeData"
+    :columns="columns"
+    :height="400"
+    virtual-scroll
+    title="大数据量表格"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      largeData: Array.from({ length: 10000 }, (_, i) => ({
+        id: i + 1,
+        name: `用户${i + 1}`,
+        age: Math.floor(Math.random() * 50) + 20,
+        city: ['北京', '上海', '广州', '深圳'][Math.floor(Math.random() * 4)]
+      })),
+      columns: [
+        { prop: 'id', label: 'ID', width: 80 },
+        { prop: 'name', label: '姓名', width: 120 },
+        { prop: 'age', label: '年龄', width: 80 },
+        { prop: 'city', label: '城市', width: 100 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 合并单元格
+
+::: demo 合并单元格
+```vue
+<template>
+  <XtTable
+    :table-data="tableData"
+    :columns="columns"
+    :group-columns="['city']"
+    title="按城市分组"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { city: '北京', name: '张三', age: 25 },
+        { city: '北京', name: '李四', age: 30 },
+        { city: '上海', name: '王五', age: 28 },
+        { city: '上海', name: '赵六', age: 32 }
+      ],
+      columns: [
+        { prop: 'city', label: '城市' },
+        { prop: 'name', label: '姓名' },
+        { prop: 'age', label: '年龄' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 小计和总计
+
+::: demo 小计和总计
+```vue
+<template>
+  <XtTable
+    :table-data="tableData"
+    :columns="columns"
+    :group-columns="['category']"
+    :subtotal-config="subtotalConfig"
+    :total-config="totalConfig"
+    title="销售统计"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { category: '电子产品', name: '手机', price: 5999, count: 10 },
+        { category: '电子产品', name: '电脑', price: 8999, count: 5 },
+        { category: '日用品', name: '牙刷', price: 20, count: 100 },
+        { category: '日用品', name: '毛巾', price: 30, count: 50 }
+      ],
+      columns: [
+        { prop: 'category', label: '分类' },
+        { prop: 'name', label: '名称' },
+        { prop: 'price', label: '单价' },
+        { prop: 'count', label: '数量' }
+      ],
+      subtotalConfig: {
+        enabled: true,
+        groupBy: ['category'],
+        labelText: '小计',
+        columns: {
+          price: 'sum',
+          count: 'sum'
+        }
+      },
+      totalConfig: {
+        enabled: true,
+        labelText: '总计',
+        columns: {
+          price: 'sum',
+          count: 'sum'
+        }
+      }
+    }
+  }
+}
+</script>
+```
+:::
+
+### 分页
+
+::: demo 分页
+```vue
+<template>
+  <XtTable
+    :table-data="tableData"
+    :columns="columns"
+    :pagination="pagination"
+    :total="100"
+    title="带分页表格"
+    @size-change="handleSizeChange"
+    @page-change="handlePageChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '张三', age: 25, city: '北京' },
+        { name: '李四', age: 30, city: '上海' }
+      ],
+      columns: [
+        { prop: 'name', label: '姓名' },
+        { prop: 'age', label: '年龄' },
+        { prop: 'city', label: '城市' }
+      ],
+      pagination: {
+        pageNum: 1,
+        pageSize: 20,
+        pageSizes: [10, 20, 50, 100]
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(size) {
+      this.pagination.pageSize = size
+    },
+    handlePageChange(page) {
+      this.pagination.pageNum = page
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义渲染
+
+::: demo 自定义渲染
+```vue
+<template>
+  <XtTable :table-data="tableData" :columns="columns">
+    <template #action="{ row }">
+      <XtButton size="small" @click="edit(row)">编辑</XtButton>
+      <XtButton size="small" type="danger" @click="del(row)">删除</XtButton>
+    </template>
+  </XtTable>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { id: 1, name: '张三', status: 1 },
+        { id: 2, name: '李四', status: 0 }
+      ],
+      columns: [
+        { prop: 'id', label: 'ID' },
+        { prop: 'name', label: '姓名' },
+        { 
+          prop: 'status', 
+          label: '状态',
+          formatter: (row) => row.status === 1 ? '正常' : '禁用'
+        },
+        { label: '操作', slot: 'action' }
+      ]
+    }
+  },
+  methods: {
+    edit(row) {
+      console.log('编辑', row)
+    },
+    del(row) {
+      console.log('删除', row)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `selection-change` | 选择项变化 | `selectedRows` |
+| `sort-change` | 排序变化 | `sortInfo` |
+| `size-change` | 每页条数变化 | `size` |
+| `page-change` | 当前页变化 | `page` |
+
+## 方法
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| `getSelection` | 获取选中行 | - |
+| `clearSelection` | 清除选中 | - |
+| `toggleRowSelection` | 切换行选中状态 | `row`, `selected` |
+| `toggleRowsSelection` | 批量切换行选中状态 | `rows`, `selected` |
+| `doLayout` | 重新计算布局 | - |
+
+## 插槽
+
+| 插槽名 | 说明 |
+|--------|------|
+| `toolbar` | 工具栏区域（标题右侧） |
+| `{slotName}` | 自定义列插槽（通过 column.slot 配置） |

package/docs/components/base/xt-tabs.md

@@ -0,0 +1,197 @@
+## XtTabs 标签页组件
+
+标签页组件，用于切换不同内容区域。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtTabs v-model="activeName">
+    <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
+    <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+    <XtTabPane label="角色管理" name="third">角色管理内容</XtTabPane>
+  </XtTabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` / `v-model` | String | - | - | 绑定值，选中标签的 name |
+| `type` | String | `card` | `card`、`border-card` | 标签页类型 |
+| `tabPosition` | String | `top` | `top`、`right`、`bottom`、`left` | 标签位置 |
+| `closable` | Boolean | `false` | - | 是否可关闭 |
+| `addable` | Boolean | `false` | - | 是否可新增 |
+| `editable` | Boolean | `false` | - | 是否可编辑（新增+关闭） |
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `tab-click` | 点击标签时触发 | `tab` |
+| `tab-remove` | 移除标签时触发 | `name` |
+| `tab-add` | 添加标签时触发 | - |
+| `edit` | 点击新增或删除按钮时触发 | `(targetName, action)` |
+
+## XtTabPane 子组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `label` | String | - | 标签页标题 |
+| `name` | String / Number | - | 标签页名称，对应 value |
+| `disabled` | Boolean | `false` | 是否禁用 |
+| `closable` | Boolean | `true` | 是否可关闭 |
+
+## 示例
+
+### 不同类型
+
+::: demo 不同类型
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtTabs v-model="activeName">
+      <XtTabPane label="卡片式" name="first">卡片式标签页</XtTabPane>
+      <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+    </XtTabs>
+    <XtTabs type="border-card" v-model="activeName">
+      <XtTabPane label="边框卡片" name="first">边框卡片式标签页</XtTabPane>
+      <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+    </XtTabs>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+```
+:::
+
+### 标签位置
+
+::: demo 标签位置
+```vue
+<template>
+  <XtTabs v-model="activeName" tab-position="left">
+    <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
+    <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+    <XtTabPane label="角色管理" name="third">角色管理内容</XtTabPane>
+  </XtTabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可关闭
+
+::: demo 可关闭
+```vue
+<template>
+  <XtTabs v-model="activeName" closable @tab-remove="handleRemove">
+    <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
+    <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+    <XtTabPane label="角色管理" name="third">角色管理内容</XtTabPane>
+  </XtTabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleRemove(name) {
+      console.log('移除标签:', name)
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可编辑
+
+::: demo 可编辑
+```vue
+<template>
+  <XtTabs v-model="activeName" editable @edit="handleEdit">
+    <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
+    <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
+  </XtTabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleEdit(targetName, action) {
+      console.log('操作:', action, '目标:', targetName)
+    }
+  }
+}
+</script>
+```
+:::
+
+### 禁用标签
+
+::: demo 禁用标签
+```vue
+<template>
+  <XtTabs v-model="activeName">
+    <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
+    <XtTabPane label="配置管理" name="second" disabled>配置管理内容</XtTabPane>
+    <XtTabPane label="角色管理" name="third">角色管理内容</XtTabPane>
+  </XtTabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- 每个 `XtTabPane` 必须设置 `name` 属性
+- `v-model` 绑定的值必须与某个 `XtTabPane` 的 `name` 匹配