@bdsoft/table
v1.1.1
Published
内部表格组件
Readme
初次使用
先删除 node_modules 文件夹，重新 npm install 安装最新依赖包
属性说明
showtool： (默认值 true 显示)是否显示表格工具栏
<bdTable id="table1" :showtool="false" :tableColumn="tableColumn" :tableData="tableData"></bdTable>事件说明
:loading='loading' // 表格加载
cellClick 单击事件 cellDblclick 双击事件
const handleClick = (row)=>{ console.info('handleClick',row) }
<bdTable id="table1" :tableColumn="tableColumn" :cellClick="handleClick" :showtool="false" :tableData="tableData"></bdTable>引用 --示例
import { useTable } from '@bdsoft/table'
app.use(useTable)
// 2. 页面中导入组件（这句话在20250729之后可以不写，改为全局组件了）
import { BdTable } from '@bdsoft/table'
<bdTable id="table1" :tableColumn="tableColumn" :tableData="tableData"></bdTable>
// 注意:pagerConfig="{ enabled: true }" 这么写不算正确 要不直接不写默认分页 要么 :pagerConfig="{ enabled: true,currentPage: 1, pageSize: 20, pageSizes: [20, 50, 100, 200] }"
const pageReload = (pageopts)=>{
console.info('分页',pageopts)
}
<bdTable id="table1" :tableColumn="tableColumn" :total="36" :tableData="tableData" :pagerConfig="{ enabled: true }" @reload="pageReload"></bdTable>
// 分页信息
const pagedata = ref({ currentPage: 1, pageSize: 20, total: 0 })
// 分页变化时的处理
const pageReload = (parm)=>{
pagedata.value.currentPage = parm.currentPage
pagedata.value.pageSize = parm.pageSize
_getJhData()
}
不分页配置::pagerConfig="{ enabled: false }"
3. 参数传递用法
列信息采用 jsx 进行自定义渲染,添加事件使用 jsx 语法进行处理 比如点击事件 onClick={(e) => chakan(e, row)}
const tableColumn = ref([ { title: '序号', type: 'seq', width: 55 }, { field: 'name', title: '标题', width: 100, slots: { default: ({ row, column }) => { return [{row.name}] } } }, { field: 'rq', title: '发文日期', width: 100, slots: { default: ({ row, column }) => { return [{parseTime3(row.rq, 'yyyy-MM-dd')}] } } }, { field: 'role', title: '专利变更文件', showOverflow: true, } ])
const tableData = ref(null);
onMounted(()=>{ tableData.value = [ { id: 10001, name: 'Test1', rq: '2023-08-28', role: 'Develop', sex: 'Man', address: 'Shenzhen' }, { id: 10002, name: 'Test2', rq: '2023-08-28', role: 'Test', sex: 'Man', address: 'Guangzhou' }, { id: 10003, name: 'Test3', rq: '2023-08-28', role: 'PM', sex: 'Man', address: 'Shanghai' } ] })
固定修改表格全局样式
:root {
// 全局修改表格样式
--vxe-table-border-color: #1d79ff !important;
--vxe-table-header-background-color: #d4e6ff !important;
--vxe-table-header-font-weight: bold !important;
--vxe-table-header-font-color: #333 !important;
// 14px 雅黑 bold
}
.vxe-table--header .vxe-header--column .vxe-cell .vxe-cell--title {
font-family: 'Microsoft YaHei' !important;
font-weight: bold !important;
font-size: 14px !important;
}合并列
将需要合并的字段名添加到数组中 autoSpanFields
<bdTable id="table1" :autoSpanFields='recursionColNames' :tableTitle="tableTitle" :tableColumn="tableColumn" :pagerConfig="{ enabled: false }" :maxTableHeight="400" :tableData="tableData" tableHeight="auto"></bdTable>自定义菜单栏
// 自定义菜单栏事件 配合:toolsConfig="toolsConfig" 使用 // const toolsConfig = ref([{ code: 'chart-line', name: '', status: '', round: true, circle: true, icon: 'vxe-icon-chart-line', click: handleChatClick }]) emits('toolClick', code);
bd-table 插槽用法
在slots中使用第三方ui库时，ui组件会使用插槽，这是一个使用示例
{
field: '',
title: '操作',
width: '8%',
minWidth: '8%',
slots: {
default: ({ row, column }) => {
return [
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
class={'dragPx'}
style={{ width: '16px', height: '16px', cursor: 'pointer' }}
src={getDefaultImg('drag.svg')}
></img>
<el-divider direction={'vertical'} />
<el-text
type={'primary'}
class={'cursorPoint'}
style={{ margin: '0px 10px' }}
onclick={() => handleOldFbClick(row)}
>
{'编辑'}
</el-text>
<el-dropdown>
{{
default: () => (
<el-text type={'primary'} class={'cursorPoint'}>
{'更多'}
</el-text>
),
dropdown: () => (
<el-dropdown-menu>
{getCurRowDropdownList(row).map(dropdownMenu => (
<el-dropdown-item
key={dropdownMenu.value}
onClick={() => handleDropdownClick(dropdownMenu, row)}
>
{dropdownMenu.label}
</el-dropdown-item>
))}
</el-dropdown-menu>
)
}}
</el-dropdown>
</div>
]
}
}
}
// 这里是处理 el-checkbox的使用示例
{
field: '',
title: '操作',
width: '7%',
minWidth: '7%',
slots: {
default: ({ row, column }) => {
return [
<div style={{ display: 'flex', alignItems: 'center' }}>
<img class={'dragPx'} style={{ width: '16px', height: '16px', cursor: 'pointer' }} src={getDefaultImg('drag.svg')}></img>
<el-divider direction={'vertical'} />
<el-text type={'primary'} class={'cursorPoint'} style={{ margin: '0px 10px' }} onclick={() => handleOldFbClick(row)}>
{'编辑'}
</el-text>
</div>
]
},
header: ({ row, column }) => {
return [
<div style={{ display: 'flex', alignItems: 'center' }}>
<el-checkbox modelValue={ checked.value } onChange={ (val)=> { checked.value = val } } label="固定操作列" size="default" />
</div>
]
}
}
}拖住组件
import { DragItem } from '@bdsoft/table'
<DragItem :listData="_testdata" isDelete></DragItem>树表展开节点
<bd-tree-table ref="treeTableRef"></bd-tree-table>
const treeTableRef = ref(null)
// 展开/闭合所有节点 true 展开 false 闭合
treeTableRef.value.openAllTreeExpand(true)
treeTableRef.value.openAllTreeExpand(false)树表排序
<bd-tree-table ref="treeTableRef" :sortConfig="sortConfig"></bd-tree-table>
const treeTableRef = ref(null)
// 排序配置对象，
const sortConfig = ref({
// 排序方法，结构参数注释如下，该方法返回排序后的数据
sortMethod: (_data) => {
const { $table, data, sortList } = _data
// $table内置了table的一些方法，data 树数据， sortList 内涵排序字段、排序方式
// sortChange这是排序方法，自定义如何排序
return sortChange(data, sortList[0].field, sortList[0].order)
}
})
// 以下是单列排序方法
/**
* 单列排序方法
*/
const sortChange = (treeData, field, order) => {
// 检查是否为数组
if (!Array.isArray(treeData)) {
throw new Error('treeData必须是一个数组')
}
// 深拷贝避免修改原始数据
const sortedTree = JSON.parse(JSON.stringify(treeData))
// 排序函数
function sortTree(tree) {
// 对当前层级排序
tree.sort((a, b) => {
const valueA = a[field]
const valueB = b[field]
// 空值优先处理
if (valueA == null && valueB == null) return 0 // 两个值都为空
if (valueA == null) return order === 'asc' ? -1 : 1 // 空值放在开头或末尾
if (valueB == null) return order === 'asc' ? 1 : -1
// 根据排序方式处理排序
if (order === 'asc') {
return valueA > valueB ? 1 : valueA < valueB ? -1 : 0
} else if (order === 'desc') {
return valueA < valueB ? 1 : valueA > valueB ? -1 : 0
} else {
throw new Error('sortType必须是"asc"或"desc"')
}
})
// 递归对子节点排序
for (const item of tree) {
if (Array.isArray(item.children)) {
sortTree(item.children)
}
}
}
// 开始排序
sortTree(sortedTree)
return sortedTree
}树表 loading
// 与bd-table使用方法类似
<bd-tree-table ref="treeTableRef" :loading="treeTableLoading"></bd-tree-table>
const treeTableLoading = ref(false)
/**
* 初始化数据
*/
const initData = () => {
treeTableLoading.value = true
// 模拟异步请求
setTimeout(() => {
treeTableLoading.value = false
}, 1000)
}
onMounted(() => {
initData()
})