x-extends / vxe-table-docs Goto Github PK
View Code? Open in Web Editor NEWvxe-table 官方文档
License: MIT License
vxe-table 官方文档
License: MIT License
表单自定义布局的span属性失效,item的宽度被固定
Related to issue #15
chrome version: Version 116.0.5845.180 (Official Build) (64-bit)
os: Windows 11
<template>
<div>
<p>
<vxe-button @click="expandEvent1">BUG测试</vxe-button>
</p>
<vxe-table border ref="xTable" :row-config="{ keyField: 'id'}" :column-config="{ resizable: true }" :tree-config="treeConfig" :data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name" width="400" tree-node></vxe-column>
</vxe-table>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { VxeTablePropTypes, VxeTableInstance } from 'vxe-table'
interface RowVO {
id: number
parentId: number | null
name: string
type: string
size: number
date: string
hasChild?: boolean
}
const xTable = ref<VxeTableInstance<RowVO>>()
const tableData = ref<RowVO[]>([
{ id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01', hasChild: true },
{ id: 23666, parentId: null, name: 'Test23', type: 'mp4', size: 0, date: '2021-01-02', hasChild: true },
{ id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' },
])
// 模拟后台
const fetchChildListApi = (parentRow: RowVO) => {
return new Promise<RowVO[]>(resolve => {
setTimeout(() => {
const childs = [
{ id: parentRow.id + 1000000, parentId: parentRow.id, name: parentRow.name + 'Test111111111111', type: 'mp4', size: 0, date: '2021-10-03', hasChild: true },
{ id: parentRow.id + 1500000, parentId: parentRow.id, name: parentRow.name + 'Test222222222222', type: 'mp3', size: 0, date: '2021-07-09', hasChild: false },
]
resolve(childs)
}, 500)
})
}
const treeConfig = reactive<VxeTablePropTypes.TreeConfig<RowVO>>({
line: true, //设为true之后含二级及以上子节点会报错
transform: true,
rowField: 'id',
parentField: 'parentId',
lazy: true,
hasChild: 'hasChild',
loadMethod({ row }) {
// 异步加载子节点
return fetchChildListApi(row)
},
})
const expandEvent1 = () => {
const $table = xTable.value
if ($table) {
$table.setTreeExpand(tableData.value[1], true).then(() => {
$table.setTreeExpand(tableData.value[1].children[0], true).then(() => {
$table.reloadTreeExpand(tableData.value[1])
})
})
}
}
</script>
报错内容
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length') at countTreeExpand (body.js:73:57)
版本
"vxe-table": "^4.4.2",
"xe-utils": "^3.5.11",
错误示例地址 https://github.com/x-extends/vxe-table-docs/blob/main/v3/src/plugins/table/renderer/filter.tsx
// 创建一个简单的输入框筛选
VXETable.renderer.add('FilterInput', {
// 筛选模板
renderFilter (h, renderOpts, params) {
return
},
// 重置数据方法
filterResetMethod ({ options }) {
options.forEach(option => {
option.data = ''
})
},
// 重置筛选复原方法(当未点击确认时,该选项将被恢复为默认值)
filterRecoverMethod ({ option }) {
option.data = ''
},
// 筛选方法
filterMethod ({ option, row, column }) {
const { data } = option
// 这里如果是 number 类型匹配错误,示例可以更正一下
const cellValue = (typeof row[column.field]) === 'number' ? ${row[column.field]}
: row[column.field]
if (cellValue) {
return cellValue.indexOf(data) > -1
}
return false
}
})
这个方法:setAllTreeExpand
咨询,如何本地化部署呢?是否有打包的dist文件提供给无法访问互联网的用户使用呢?
当我打开弹窗后将弹窗放在浏览器窗口最右侧时,将浏览器缩小后,弹窗会在浏览器的最右侧,并且我无法看到弹窗并拖动
性别选项未加<template #default>,导致选项无法显示
formConfig:{ // ... items:[ { itemRender:{ name: "$buttons", children:[ { props:{ content:'清除缓存', status:'success', events:{ // 这里这个事件是这么写吧 为什么点击不生效 click:()=>{ console.log(1111) } } } } ] } } ] }
作者你好。
我们的团队在使用自定义表头筛选时,遇到了一个超出预期的bug。
bug复现操作方式如下,
1、点击表头的筛选图标,打开筛选面板;;
2、在输入框中输入字符;;
3、点击筛选面板外部使它关闭;;(重要步骤!)
4、再次点击表头的筛选图标,打开筛选面板;;
5、点击筛选;;
此时,筛选功能并没有成功的产生效果。
此bug在官方文档项目演示中,也可被复现。
附官方文档url:https://vxetable.cn/v3/#/table/renderer/filter
在表格第三列 ‘实现条件的筛选‘ 。
按照上方bug复现操作方式,即可复现此bug。
非常期待你的回复。
附我们项目的一些相关依赖包版本号,
vue版本号:2.6.10
vxe-table版本号:3.6.11
xe-utils版本号:3.5.7
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.