wocwin / t-ui

Vue 项目中基于Element-ui 二次封装基础组件文档；Vue基础组件文档

T-ui

Vue3 基础组件传送门

基于 Element-plus 二次封装基础组件地址

T-ui使用Demo项目

wocwin-vue2是常规基于Vue2、Vuex、webpack 开源的一套后台管理模板；此项目全面使用了T-ui二次封装基础组件库

介绍

基于 Element-ui 二次封装组件

这是我在学习 Vue 中基于Element-ui 二次封装基础组件文档，希望对你有用。可查看 详细组件案例文档 预览

拆分基于ant-design-vue封装的组件（1.1.2版本）

Vue2 基于ant-design-vue封装基础组件地址

动态效果图

npm 方式安装使用

前提条件：使用项目必须全局注册 Element-ui组件库

// 先安装
npm i @wocwin/t-ui
// 1、 在main.js中按下引入(全局使用)
import Tui from '@wocwin/t-ui'
Vue.use(Tui)

// 2、按需引入，在单个vue文件如下引入，在注册；或者在main.js中如下引入在注册，皆可！
import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'

直接在项目中全局使用

// 1、把packages文件夹复制，放在自己项目中
// 2、假设 packages 与 src是同级，那么src下 main.js 如下操作即可全局使用t-ui
import Tui from '../packages'
Vue.use(Tui)

全部组件如下

组件名称	说明
TLayoutPage	布局页面
TLayoutPageItem	布局页面子项
TAdaptivePage	一屏组件（继承TTable 及 TQueryCondition 组件的所有属性、事件、插槽、方法）
TQueryCondition	条件查询组件
TTable	表格组件
TForm	表单组件
TSelectTable	下拉选择表格组件
TSelect	下拉选择组件
TDetail	详情组件
TButton	防抖按钮组件
TStepWizard	步骤条组件
TTimerBtn	定时按钮组件
TModuleForm	模块表单/详情组件
TDatePicker	日期选择器组件
TInput	input组件
TDialog	弹窗组件
TTreeSelect	下拉树形结构组件

安装依赖

npm install

本地运行 src 中组件示例

npm run serve

本地运行 vuepress 中组件文档

npm run docs:dev

Thanks to all the contributors

微信交流群

目前微信群已超过 200 人，需要加微信好友(请备注 T-ui)，拉大家进群

微信二维码

Git 提交规范

• ci: ci 配置文件和脚本的变动;
• chore: 构建系统或辅助工具的变动;
• fix: 代码 BUG 修复;
• feat: 新功能;
• perf: 性能优化和提升;
• refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
• style: 代码格式调整，可能是空格、分号、缩进等等;
• docs: 文档变动;
• test: 补充缺失的测试用例或者修正现有的测试用例;
• revert: 回滚操作;

t-ui's Issues

是否支持样式修改

如题

t-select-table

form 表单回显的时候设置 :defaultSelectVal 没有效果 ，defaultSelectVal 是数据请求来的，如果写死的话

table 默认多选不生效，原生的就可以，很奇怪

关于主题配置

怎么支持预设主题呢

表格合并后单元格编辑的功能存在错误

使用input输入功能会发生报错，未知是否与scope.row[scope.column.property]获取单元格的值这个有关

是否支持按需引入

是否支持按需引入
是否支持按需引入
是否支持按需引入

虚拟列表问题

table当使用虚拟列表use-virtual时，maxHeight就会失效 只用用 heigh设置成固定盖

vue2 插槽为何不生效？

有计划支持vue3嘛

this.$refs.baseDataRef.doLayout()is not a function

demo中doLayout()不能使用，单击整行也没有选中效果

业务组件--数位顺序表

---

名称: 数位顺序表
关于: 财务管理常见记账凭证用

关于数位顺序表组件。如下图，数字金额可以修改，输入的数字分割各个位数，插入对应的数位中，注意小数点后2位对应角和分

数位顺序表.md

t-adaptive-page组件，title插槽 要v-bind:title 一个值才能使用，不然插槽不能使用

代码如下：

怎样可以直接使用插槽的方式呢

TTreeSelect 回显怎么回显

會做多國語係嗎

如題

会考虑可编辑的table支持键盘事件吗

插槽自定义的输入框无法触发键盘事件

插槽自定义编辑的输入框无法触发键盘事件

t-select-table 回显时没有默认选中

设置了defaultSelectVal。
手动去设置组件里面的defaultSelectValue与defaultValue也不行。
需要点一下下拉菜单才能显示。

TAdaptivePage组件不使用toolbar表格外操作按钮，还是会占空间

屏幕宽度变小后t-query-condition渲染出错

如图：

还有是否支持变更每行4列到每行3列

表格整行编辑功能之按钮文案修改

表格整行编辑功能中添加按钮如何修改文案，比如改为“新增一行”

下拉选择表格组件缺少搜索功能

对于表格缺少搜索功能,实际使用时搜索很有必要

单元格编辑—键盘事件功能有异常

在输入框输入内容，按回车键后整个页面都会刷新

使用<t-adaptive-page>时发现，点击行时会触发切换页面current-change的事件

点击行会触发，回调参数会把rowData传回来，导致查询接口报错

t-select-table 里的搜索和重置按钮怎么改为英文

t-select-table 里的搜索和重置按钮怎么改为英文

t-select-table图片显示问题

动态由后台拼接src,是怎么传入slots里面的。能出个demo吗谢谢。