diff --git a/docs/components/TQueryCondition/base.md b/docs/components/TQueryCondition/base.md index facb5482..0cb86c03 100644 --- a/docs/components/TQueryCondition/base.md +++ b/docs/components/TQueryCondition/base.md @@ -43,7 +43,7 @@ TQueryCondition/eventHandle ### 结合自己封装组件使用 ::: demo -TQueryCondition/TSelectUse +TQueryCondition/comUse ::: ### 按钮操作使用 diff --git a/docs/components/TTable/base.md b/docs/components/TTable/base.md index 017a976e..b8b90a57 100644 --- a/docs/components/TTable/base.md +++ b/docs/components/TTable/base.md @@ -294,86 +294,87 @@ TTable/expand ### 2、配置参数（Table Attributes） -| 参数 | 说明 | 类型 | 默认值 | -| :---------------------- | :------------------------------------------------------------------------ | :--------------- | :-------- | -| table | 表格数据对象 | Object | {} | -| ---rules | 规则（可依据 elementPlus el-form 配置————对应 columns 的 prop 值） | Object | - | -| ---data | 展示数据 | Array | [] | -| ---toolbar | 表格外操作栏选中表格某行，可以将其数据传出 | Array | [] | -| ---operator | 表格内操作栏数据 | Array | [] | -| -------hasPermi | 表格内操作栏按钮权限资源（必须传`btnPermissions`属性才生效） | String | - | -| -------show | 表格内操作栏根据状态显示 | Object | - | -| -------render | render 函数渲染使用的 Function(val) 可以用 tsx 方式 | Function | - | -| -------noshow | 表格内操作栏根据多种状态不显示 | Array | - | -| -------bind | 继承 el-button 所有 Attributes | Object | - | -| -------fun | 事件名 | function | - | -| ---operatorConfig | 表格内操作栏样式 | Object | - | -| --------fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧(true / 'left' / 'right') | string / boolean | - | -| --------label | 显示的标题 | string | '操作' | -| --------width | 对应列的宽度(固定的) | string / number | - | -| --------minWidth | 对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列) | string / number | - | -| --------align | 对齐方式 （left / center / right） | string | 'center' | -| --------bind | el-table-column Attributes | Object | - | -| ---firstColumn | 表格首列(序号 index,复选框 selection,单选 radio,展开行 expand）排列 | object/Array | - | -| ---total | 数据总条数 | Number | - | -| ---pageSize | 页数量 | Number | - | -| ---currentPage | 是否需要显示切换页条数 | Number | - | -| columns | 表头信息 | Array | [] | -| ----sort | 排序 （设置：sort:true） | Boolean | false | -| ----sortable | 排序，若设置为 'custom'，需要监听 Table 的 sort-change 事件 | Boolean /string | false | -| ----align | 对齐方式 （left / center / right） | string | 'center' | -| ----renderHeader | 列标题 Label 区域渲染使用的 Function(val) 可以用 jsx 方式 | Function | - | -| ----render | 某列 render 函数渲染使用的 Function(val) 可以用 jsx 方式 | Function | - | -| ----bind | el-table-column Attributes | Object | - | -| ----width | 对应列的宽度(固定的) | string / number | - | -| ----minWidth | 对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列) | string / number | - | -| ----slotName | 插槽显示此列数据（其值是具名作用域插槽 | String | - | -| ----isShowHidden | 是否动态显示隐藏列设置（隐藏/显示列） | Boolean | false | -| ----slotNameMerge | 合并表头插槽显示此列数据（其值是具名作用域插槽） | String | - | -| ----------scope | 具名插槽获取此行数据必须用解构接收{scope}.row 是当前行数据 } | Object | - | -| ----canEdit | 是否开启单元格编辑功能 | Boolean | false | -| ----configEdit | 表格编辑配置（开启编辑功能有效） | Object | - | -| ----------rules | 规则（可依据 elementPlus el-form 配置————对应 columns 的 prop 值） | Object | - | -| ----------label | placeholder 显示 | String | - | -| ----------editComponent | 组件名称可直接指定全局注册的组件，也可引入'element'如：'el-input' | String/component | - | -| ----------eventHandle | 第三方 UI 的 事件（返回三个参数，需解构获取{val,prop,scope}） | Object | - | -| ----------bind | 第三方 UI 的 Attributes，（`Function`返回值scope） | Object/Function | - | -| ----------event | 触发 handleEvent 事件的标志 | String | - | -| ----------type | 下拉或者复选框显示（select-arr/select-obj/checkbox） | String | - | -| ----------list | 下拉选择数据源名称 | String | - | -| ----------arrLabel | type:select-arr 时对应显示的中文字段 | String | label | -| ----------arrKey | type:select-arr 时对应显示的数字字段 | String | key | -| ----filters | 字典过滤 | Object | - | -| ----------list | listTypeInfo 里面对应的下拉数据源命名 | String | - | -| ----------key | 数据源的 key 字段 | String | 'value' | -| ----------label | 数据源的 label 字段 | String | 'label' | -| btnPermissions | 按钮权限数据集（后台返回的按钮权限集合） | Array | - | -| listTypeInfo | 下拉选择数据源 | Object | - | -| footer | 底部操作区（默认隐藏，使用插槽展示“保存”按钮） | slot | - | -| pagination | 分页器自定义内容 设置文案(table 设置 layout 才生效) | slot | - | -| isKeyup | 单元格编辑是否开启键盘事件 | Boolean | false | -| isShowFooterBtn | 是否显示保存按钮 | Boolean | false | -| title | 表格左上标题 | String /slot | - | -| tableTitle | 表格左上标题（为解决顶层容器会出现原生的 title 属性）同时存在优先展示插槽 | String /slot | - | -| isShowPagination | 是否显示分页(默认显示分页) | Boolean | true | -| isPaginationCumulative | 序列号显示是否分页累加 | Boolean | false | -| isCopy | 是否允许双击单元格复制 | Boolean | false | -| defaultRadioCol | 设置默认选中项（单选）defaultRadioCol 值必须大于 0！ | Number | - | -| rowClickRadio | 是否开启点击整行选中单选框 | Boolean | true | -| columnSetting | 是否显示设置（隐藏/显示列） | Boolean | false | -| name | 与 columnSetting 配合使用标记隐藏/显示列唯一性 | String | title | -| isRowSort | 是否开启行拖拽(`row-key` 需要设置) | Boolean | false | -| isTree | 是否开启 Tree-table 样式 | Boolean | false | -| columnSetBind | 列设置按钮配置（继承`el-button`所有属性） | Object | - | -| ----btnTxt | 按钮显示文字 | String | '列设置' | -| ----title | 点击按钮下拉显示 title | String | '列设置' | -| ----isShowTitle | 点击按钮下拉是否显示 title | Boolean | true | -| ----size | el-button 的 size | String | 'default' | -| ----icon | el-button 的 icon | String | 'Setting' | -| align | table 对齐方式 可选值`left`、`center`、`right` | String | 'center' | -| isSlotToolbar | TAdaptivePage 组件是否使用了 Toolbar 插槽 | Boolean | false | -| isSlotTitle | TAdaptivePage 组件是否使用了 title 插槽 | Boolean | - | -| sortable | 设置为 'custom',需要监听 Table 的 sort-change 事件 | Boolean/string | - | +| 参数 | 说明 | 类型 | 默认值 | +| :---------------------- | :---------------------------------------------------------------------------------- | :--------------- | :----------------------------------------- | +| table | 表格数据对象 | Object | {} | +| ---layout | 分页组件布局[参考](https://element-plus.org/zh-CN/component/pagination.html?_blank) | Object | `'total,sizes, prev, pager, next, jumper'` | +| ---rules | 规则（可依据 elementPlus el-form 配置————对应 columns 的 prop 值） | Object | - | +| ---data | 展示数据 | Array | [] | +| ---toolbar | 表格外操作栏选中表格某行，可以将其数据传出 | Array | [] | +| ---operator | 表格内操作栏数据 | Array | [] | +| -------hasPermi | 表格内操作栏按钮权限资源（必须传`btnPermissions`属性才生效） | String | - | +| -------show | 表格内操作栏根据状态显示 | Object | - | +| -------render | render 函数渲染使用的 Function(val) 可以用 tsx 方式 | Function | - | +| -------noshow | 表格内操作栏根据多种状态不显示 | Array | - | +| -------bind | 继承 el-button 所有 Attributes | Object | - | +| -------fun | 事件名 | function | - | +| ---operatorConfig | 表格内操作栏样式 | Object | - | +| --------fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧(true / 'left' / 'right') | string / boolean | - | +| --------label | 显示的标题 | string | '操作' | +| --------width | 对应列的宽度(固定的) | string / number | - | +| --------minWidth | 对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列) | string / number | - | +| --------align | 对齐方式 （left / center / right） | string | 'center' | +| --------bind | el-table-column Attributes | Object | - | +| ---firstColumn | 表格首列(序号 index,复选框 selection,单选 radio,展开行 expand）排列 | object/Array | - | +| ---total | 数据总条数 | Number | - | +| ---pageSize | 页数量 | Number | - | +| ---currentPage | 是否需要显示切换页条数 | Number | - | +| columns | 表头信息 | Array | [] | +| ----sort | 排序 （设置：sort:true） | Boolean | false | +| ----sortable | 排序，若设置为 'custom'，需要监听 Table 的 sort-change 事件 | Boolean /string | false | +| ----align | 对齐方式 （left / center / right） | string | 'center' | +| ----renderHeader | 列标题 Label 区域渲染使用的 Function(val) 可以用 jsx 方式 | Function | - | +| ----render | 某列 render 函数渲染使用的 Function(val) 可以用 jsx 方式 | Function | - | +| ----bind | el-table-column Attributes | Object | - | +| ----width | 对应列的宽度(固定的) | string / number | - | +| ----minWidth | 对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列) | string / number | - | +| ----slotName | 插槽显示此列数据（其值是具名作用域插槽 | String | - | +| ----isShowHidden | 是否动态显示隐藏列设置（隐藏/显示列） | Boolean | false | +| ----slotNameMerge | 合并表头插槽显示此列数据（其值是具名作用域插槽） | String | - | +| ----------scope | 具名插槽获取此行数据必须用解构接收{scope}.row 是当前行数据 } | Object | - | +| ----canEdit | 是否开启单元格编辑功能 | Boolean | false | +| ----configEdit | 表格编辑配置（开启编辑功能有效） | Object | - | +| ----------rules | 规则（可依据 elementPlus el-form 配置————对应 columns 的 prop 值） | Object | - | +| ----------label | placeholder 显示 | String | - | +| ----------editComponent | 组件名称可直接指定全局注册的组件，也可引入'element'如：'el-input' | String/component | - | +| ----------eventHandle | 第三方 UI 的 事件（返回三个参数，需解构获取{val,prop,scope}） | Object | - | +| ----------bind | 第三方 UI 的 Attributes，（`Function`返回值scope） | Object/Function | - | +| ----------event | 触发 handleEvent 事件的标志 | String | - | +| ----------type | 下拉或者复选框显示（select-arr/select-obj/checkbox） | String | - | +| ----------list | 下拉选择数据源名称 | String | - | +| ----------arrLabel | type:select-arr 时对应显示的中文字段 | String | label | +| ----------arrKey | type:select-arr 时对应显示的数字字段 | String | key | +| ----filters | 字典过滤 | Object | - | +| ----------list | listTypeInfo 里面对应的下拉数据源命名 | String | - | +| ----------key | 数据源的 key 字段 | String | 'value' | +| ----------label | 数据源的 label 字段 | String | 'label' | +| btnPermissions | 按钮权限数据集（后台返回的按钮权限集合） | Array | - | +| listTypeInfo | 下拉选择数据源 | Object | - | +| footer | 底部操作区（默认隐藏，使用插槽展示“保存”按钮） | slot | - | +| pagination | 分页器自定义内容 设置文案(table 设置 layout 才生效) | slot | - | +| isKeyup | 单元格编辑是否开启键盘事件 | Boolean | false | +| isShowFooterBtn | 是否显示保存按钮 | Boolean | false | +| title | 表格左上标题 | String /slot | - | +| tableTitle | 表格左上标题（为解决顶层容器会出现原生的 title 属性）同时存在优先展示插槽 | String /slot | - | +| isShowPagination | 是否显示分页(默认显示分页) | Boolean | true | +| isPaginationCumulative | 序列号显示是否分页累加 | Boolean | false | +| isCopy | 是否允许双击单元格复制 | Boolean | false | +| defaultRadioCol | 设置默认选中项（单选）defaultRadioCol 值必须大于 0！ | Number | - | +| rowClickRadio | 是否开启点击整行选中单选框 | Boolean | true | +| columnSetting | 是否显示设置（隐藏/显示列） | Boolean | false | +| name | 与 columnSetting 配合使用标记隐藏/显示列唯一性 | String | title | +| isRowSort | 是否开启行拖拽(`row-key` 需要设置) | Boolean | false | +| isTree | 是否开启 Tree-table 样式 | Boolean | false | +| columnSetBind | 列设置按钮配置（继承`el-button`所有属性） | Object | - | +| ----btnTxt | 按钮显示文字 | String | '列设置' | +| ----title | 点击按钮下拉显示 title | String | '列设置' | +| ----isShowTitle | 点击按钮下拉是否显示 title | Boolean | true | +| ----size | el-button 的 size | String | 'default' | +| ----icon | el-button 的 icon | String | 'Setting' | +| align | table 对齐方式 可选值`left`、`center`、`right` | String | 'center' | +| isSlotToolbar | TAdaptivePage 组件是否使用了 Toolbar 插槽 | Boolean | false | +| isSlotTitle | TAdaptivePage 组件是否使用了 title 插槽 | Boolean | - | +| sortable | 设置为 'custom',需要监听 Table 的 sort-change 事件 | Boolean/string | - | ### 3、events 其他事件按照 el-table 直接使用（如 sort-change 排序事件） diff --git a/docs/examples/TForm/comUse.vue b/docs/examples/TForm/comUse.vue index 4e025768..0f20cd7f 100644 --- a/docs/examples/TForm/comUse.vue +++ b/docs/examples/TForm/comUse.vue @@ -102,7 +102,8 @@ const formOpts: any = reactive({ valDate1: null, valDate2: null, valDate3: null, - date: null + date: null, + icon: "" }, fieldList: [ { @@ -140,6 +141,14 @@ const formOpts: any = reactive({ isSelfCom: true, bind: { multiple: true, optionSource: hobbyList, valueCustom: "value" } }, + { + label: "图标选择器", + value: "icon", + placeholder: "TSelectIcon图标选择", + comp: "t-select-icon", + isSelfCom: true + // bind: { multiple: true } + }, { label: "年份", value: "createDate", diff --git a/docs/examples/TQueryCondition/TSelectUse.vue b/docs/examples/TQueryCondition/comUse.vue similarity index 91% rename from docs/examples/TQueryCondition/TSelectUse.vue rename to docs/examples/TQueryCondition/comUse.vue index 983d9521..26186858 100644 --- a/docs/examples/TQueryCondition/TSelectUse.vue +++ b/docs/examples/TQueryCondition/comUse.vue @@ -23,7 +23,9 @@ let state = reactive({ workshopNum2: null, workshopNum3: null, date: null, - deptCode: null + date1: null, + deptCode: null, + icon: "" }, table: { data: [ @@ -148,6 +150,20 @@ const opts = computed(() => { optionSource: stepList } }, + icon: { + label: "图标选择器", + comp: "t-select-icon", + span: 2 + }, + date1: { + label: "t-date-picker", + comp: "t-date-picker", + span: 2, + bind: { + type: "daterange", + isPickerOptions: true + } + }, date: { label: "装炉时间", comp: "el-date-picker", @@ -189,9 +205,17 @@ const radioChange2 = val => { } // 最终参数获取 const getQueryData = computed(() => { - const { userName, userName2, workshopNum, date, workshopNum2, workshopNum3, deptCode } = toRefs( - state.queryData - ) + const { + userName, + userName2, + workshopNum, + date, + workshopNum2, + workshopNum3, + deptCode, + date1, + icon + } = toRefs(state.queryData) return { userName: userName.value, userName2: userName2.value, @@ -199,6 +223,8 @@ const getQueryData = computed(() => { workshopNum2: workshopNum2.value, workshopNum3: workshopNum3.value, deptCode: deptCode.value, + date1: date1.value, + icon: icon.value, beginDate: date.value && date.value[0] ? date.value[0] : null, endDate: date.value && date.value[1] ? date.value[1] : null } diff --git a/packages/form/src/index.vue b/packages/form/src/index.vue index 05432d6e..4c556e5a 100644 --- a/packages/form/src/index.vue +++ b/packages/form/src/index.vue @@ -102,7 +102,6 @@ :value="compChildValue(item, value, key)" >{{ compChildShowLabel(item, value) }} - diff --git a/packages/select-icon/src/index.vue b/packages/select-icon/src/index.vue index c0cda98f..0b705204 100644 --- a/packages/select-icon/src/index.vue +++ b/packages/select-icon/src/index.vue @@ -79,7 +79,7 @@ let valueIcon = computed({ const $attrs: any = useAttrs() const attrs = computed(() => { const selectBind = { - "prefix-icon": Icons[props.prefixIcon], + "prefix-icon": customIcons[props.prefixIcon], placeholder: "请选择图标", dialogTitle: "请选择图标", searchPlaceholder: "搜索图标",