✨(component): update
This commit is contained in:
就眠儀式
parent
888e0b0cc9
commit
e93c1b5e2a
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.3.12",
|
||||
"version": "1.3.13",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -84,9 +84,7 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
|
||||
const isExpand: WritableComputedRef<any> = computed({
|
||||
get() {
|
||||
return tableExpandAll.value
|
||||
? true
|
||||
: tableExpandKeys.value.includes(props.data[props.id]);
|
||||
return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
|
||||
},
|
||||
set(val) {
|
||||
let newTableExpandKeys = [...tableExpandKeys.value];
|
||||
|
||||
@ -64,8 +64,8 @@ const props = withDefaults(defineProps<LayTableProps>(), {
|
||||
expandIndex: 0,
|
||||
rowStyle: "",
|
||||
cellStyle: "",
|
||||
spanMethod: () => {},
|
||||
defaultExpandAll: false,
|
||||
spanMethod: () => { },
|
||||
expandKeys: () => [],
|
||||
});
|
||||
|
||||
@ -97,6 +97,7 @@ const tableColumnKeys = ref(
|
||||
);
|
||||
|
||||
const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
|
||||
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
|
||||
|
||||
watch(
|
||||
() => props.selectedKeys,
|
||||
@ -106,6 +107,14 @@ watch(
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.expandKeys,
|
||||
() => {
|
||||
tableExpandKeys.value = props.expandKeys;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return props.selectedKey;
|
||||
@ -115,15 +124,6 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
},
|
||||
});
|
||||
|
||||
const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return [...props.expandKeys];
|
||||
},
|
||||
set(val) {
|
||||
emit("update:expandKeys", val);
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.dataSource,
|
||||
() => {
|
||||
@ -132,7 +132,7 @@ watch(
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const changeAll = function (checked: any) {
|
||||
const changeAll = (checked: any) => {
|
||||
const ids = props.dataSource.map((item: any) => {
|
||||
return item[props.id];
|
||||
});
|
||||
@ -164,6 +164,12 @@ watch(
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
watch(tableExpandKeys, () => {
|
||||
emit("update:expandKeys", tableExpandKeys.value);
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const change = function (page: any) {
|
||||
emit("change", page);
|
||||
};
|
||||
@ -433,31 +439,15 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="layui-table-tool-checkbox">
|
||||
<lay-checkbox
|
||||
v-for="column in columns"
|
||||
v-model="tableColumnKeys"
|
||||
skin="primary"
|
||||
:key="column.key"
|
||||
:value="column.key"
|
||||
>{{ column.title }}</lay-checkbox
|
||||
>
|
||||
<lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
|
||||
:value="column.key">{{ column.title }}</lay-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="exportData()"
|
||||
>
|
||||
<div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="print()"
|
||||
>
|
||||
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -465,34 +455,22 @@ const renderTotalRowCell = (column: any) => {
|
||||
|
||||
<div class="layui-table-box">
|
||||
<!-- 表头 -->
|
||||
<div
|
||||
class="layui-table-header"
|
||||
:style="[{ 'padding-right': `${scrollWidthCell}px` }]"
|
||||
>
|
||||
<div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
|
||||
<div class="layui-table-header-wrapper" ref="tableHeader">
|
||||
<table class="layui-table" :lay-size="size" :lay-skin="skin">
|
||||
<colgroup>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
}" />
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="column"
|
||||
>
|
||||
<th
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
class="layui-table-cell"
|
||||
:class="[
|
||||
<template v-for="(column, columnIndex) in columns" :key="column">
|
||||
<th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
column.type == 'checkbox'
|
||||
@ -502,22 +480,15 @@ const renderTotalRowCell = (column: any) => {
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]"
|
||||
:style="[
|
||||
]" :style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]"
|
||||
>
|
||||
]">
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<lay-checkbox
|
||||
v-model="hasChecked"
|
||||
:is-indeterminate="!allChecked"
|
||||
skin="primary"
|
||||
value="all"
|
||||
@change="changeAll"
|
||||
/>
|
||||
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
|
||||
@change="changeAll" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>
|
||||
@ -529,21 +500,11 @@ const renderTotalRowCell = (column: any) => {
|
||||
</template>
|
||||
</span>
|
||||
<!-- 插槽 -->
|
||||
<span
|
||||
v-if="column.sort"
|
||||
class="layui-table-sort layui-inline"
|
||||
lay-sort
|
||||
>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'asc')"
|
||||
class="layui-edge layui-table-sort-asc"
|
||||
title="升序"
|
||||
></i>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc"
|
||||
title="降序"
|
||||
></i>
|
||||
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
|
||||
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
|
||||
title="升序"></i>
|
||||
<i @click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc" title="降序"></i>
|
||||
</span>
|
||||
</template>
|
||||
</th>
|
||||
@ -554,59 +515,29 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表身 -->
|
||||
<div
|
||||
class="layui-table-body layui-table-main"
|
||||
:style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody"
|
||||
>
|
||||
<table
|
||||
v-if="tableDataSource.length > 0"
|
||||
class="layui-table"
|
||||
:class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody">
|
||||
<table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size" :lay-skin="skin">
|
||||
<colgroup>
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
>
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
}" />
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- 渲染 -->
|
||||
<template v-for="(data, index) in tableDataSource" :key="index">
|
||||
<table-row
|
||||
:id="id"
|
||||
:index="index"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace"
|
||||
:expandIndex="expandIndex"
|
||||
:cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName"
|
||||
:rowStyle="rowStyle"
|
||||
:rowClassName="rowClassName"
|
||||
:spanMethod="spanMethod"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
@row="rowClick"
|
||||
@row-double="rowDoubleClick"
|
||||
@row-contextmenu="rowContextmenu"
|
||||
v-model:expandKeys="tableExpandKeys"
|
||||
v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey"
|
||||
>
|
||||
<table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
|
||||
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" @row="rowClick"
|
||||
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu" v-model:expandKeys="tableExpandKeys"
|
||||
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey">
|
||||
<template v-for="name in slotsData" #[name]="{ data }">
|
||||
<slot :name="name" :data="data"></slot>
|
||||
</template>
|
||||
@ -616,10 +547,7 @@ const renderTotalRowCell = (column: any) => {
|
||||
</table-row>
|
||||
</template>
|
||||
<tr v-if="hasTotalRow" class="layui-table-total">
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
>
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<td>{{ renderTotalRowCell(column) }}</td>
|
||||
</template>
|
||||
@ -631,15 +559,8 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="page" class="layui-table-page">
|
||||
<lay-page
|
||||
show-page
|
||||
show-skip
|
||||
show-limit
|
||||
:total="page.total"
|
||||
:limit="page.limit"
|
||||
v-model="page.current"
|
||||
@jump="change"
|
||||
>
|
||||
<lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
|
||||
@jump="change">
|
||||
<template #prev>
|
||||
<lay-icon type="layui-icon-left" />
|
||||
</template>
|
||||
|
||||
@ -226,8 +226,8 @@ export default {
|
||||
::: demo 当表格内容较多不能一次性完全展示时。
|
||||
|
||||
<template>
|
||||
展开行: {{ expandKeys6 }}
|
||||
<lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expand-keys="expandKeys6">
|
||||
{{ expandKeys6 }}
|
||||
<lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expandKeys="expandKeys6">
|
||||
<template v-slot:expand="{ data }">
|
||||
<lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
|
||||
</template>
|
||||
@ -282,7 +282,8 @@ export default {
|
||||
::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="true">
|
||||
{{ expandKeys7 }}
|
||||
<lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="defaultExpandAll7" v-model:expandKeys="expandKeys7">
|
||||
<template #score="{ data }">{{ data }}</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
@ -306,13 +307,18 @@ export default {
|
||||
]
|
||||
|
||||
const dataSource7 = [
|
||||
{name:"系统管理", score:100, children: [{name:"用户管理", score:99, children: [{name:"用户修改", score:98},{name:"用户删除", score:97}]},{name:"角色管理", score:96}]},
|
||||
{name:"电商管理", score:100, children: [{name:"商品管理", score:11},{name:"分类管理", score:22}]},
|
||||
{id: "1", name:"系统管理", score:100, children: [{id: "3", name:"用户管理", score:99},{id: "5", name:"角色管理", score:96,children: [{id: "7", name:"用户管理", score:99},{id: "8", name:"角色管理", score:96}]}]},
|
||||
{id: "2", name:"电商管理", score:100, children: [{id: "4", name:"商品管理", score:11},{id: "6", name:"分类管理", score:22}]},
|
||||
]
|
||||
|
||||
const expandKeys7 = ref(["1"])
|
||||
const defaultExpandAll7 = ref(false)
|
||||
|
||||
return {
|
||||
columns7,
|
||||
dataSource7
|
||||
dataSource7,
|
||||
expandKeys7,
|
||||
defaultExpandAll7
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1277,7 +1283,8 @@ export default {
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
|
||||
| id | 主键 | `string` | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 | -- | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 (多选) | -- | -- | -- |
|
||||
| v-model:selectedKey | 选中项 (单选) | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
|
||||
| children-column-name | 树节点字段 | `string` | `children`| -- |
|
||||
@ -1291,6 +1298,9 @@ export default {
|
||||
| rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- |
|
||||
| skin | 风格 | `string` | -- | `line` `row` `nob` |
|
||||
| expand-index | 展开所在列 | `number` | -- | -- |
|
||||
| default-expand-all | 默认展开所有列 | `boolean` | `false` | `true` `false` |
|
||||
| expand-keys | 展开的列 | `array` | `[]` | -- |
|
||||
| span-method | 合并算法 | `function` | -- | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -11,6 +11,15 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.3.x">
|
||||
<ul>
|
||||
<a name="1-3-13"></a>
|
||||
<li>
|
||||
<h3>1.3.13 <span class="layui-badge-rim">2022-08-04</span></h3>
|
||||
<ul>
|
||||
<li>[修复] table 组件 expandKeys 不存在, 无法展开的问题。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-3-12"></a>
|
||||
<li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user