theluyuan/layui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码规范

Browse Source
This commit is contained in:
Theluyuan 2023-04-21 14:04:54 +08:00
parent d712290847
commit 32ba924247
3 changed files with 367 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/table/TableRow.vue
View File

@ -116,8 +116,8 @@ props.columns.map((value: any) => {
}); });
const rowClick = function (data: any, evt: MouseEvent) { const rowClick = function (data: any, evt: MouseEvent) {
let click = new Event("click") let click = new Event("click");
window.dispatchEvent(click) window.dispatchEvent(click);
emit("row", data, evt); emit("row", data, evt);
}; };

364
src/component/table/index.vue
View File

@ -71,11 +71,11 @@ const props = withDefaults(defineProps<TableProps>(), {
rowStyle: "", rowStyle: "",
cellStyle: "", cellStyle: "",
defaultExpandAll: false, defaultExpandAll: false,
spanMethod: () => { }, spanMethod: () => {},
expandKeys: () => [], expandKeys: () => [],
loading: false, loading: false,
getCheckboxProps: () => { }, getCheckboxProps: () => {},
getRadioProps: () => { }, getRadioProps: () => {},
}); });
const emit = defineEmits([ const emit = defineEmits([
@ -86,15 +86,15 @@ const emit = defineEmits([
"row-contextmenu", "row-contextmenu",
"row-double", "row-double",
"row", "row",
"update:page" "update:page",
]); ]);
const slot = useSlots(); const slot = useSlots();
const slots = slot.default && slot.default(); const slots = slot.default && slot.default();
const tableRef = ref(); const tableRef = ref();
const datalist = ref([...props.dataSource]) const datalist = ref([...props.dataSource]);
console.log(datalist.value,97) console.log(datalist.value, 97);
const s = ""; const s = "";
const allChecked = ref(false); const allChecked = ref(false);
const hasChecked = ref(false); const hasChecked = ref(false);
@ -323,28 +323,31 @@ watch(
}, },
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
watch(tableDataSource,()=>{ watch(tableDataSource, () => {
if(!props.page){ if (!props.page) {
datalist.value = tableDataSource.value datalist.value = tableDataSource.value;
}else{ } else {
// props.page.count = tableDataSource.value.length // props.page.count = tableDataSource.value.length
let tmp ={...props.page} let tmp = { ...props.page };
tmp.total = tableDataSource.value.length tmp.total = tableDataSource.value.length;
emit("update:page",tmp) emit("update:page", tmp);
// tableDataSource.value = endlist // tableDataSource.value = endlist
change({ change({
limit: props.page.limit, limit: props.page.limit,
current: pagecurrent || props.page.current current: pagecurrent || props.page.current,
}) });
} }
}) });
watch(()=>props.page,()=>{ watch(
console.log(props.page,342) () => props.page,
}) () => {
let pagecurrent:number; console.log(props.page, 342);
}
);
let pagecurrent: number;
const change = function (page: any) { const change = function (page: any) {
// emit("change", page); // emit("change", page);
pagecurrent = page.current pagecurrent = page.current;
datalist.value = tableDataSource.value.slice( datalist.value = tableDataSource.value.slice(
page.limit * (page.current - 1), page.limit * (page.current - 1),
page.limit * page.current page.limit * page.current
@ -738,67 +741,69 @@ onBeforeUnmount(() => {
const soulstatus = ref(false); const soulstatus = ref(false);
const soultop = ref(0); const soultop = ref(0);
const soulleft = ref(0); const soulleft = ref(0);
const selcolumn = ref<any>({}) const selcolumn = ref<any>({});
const soulkey = ref("") const soulkey = ref("");
const sxlist:any = ref({}) const sxlist: any = ref({});
function showsoul(event: MouseEvent, column: any, key: string) { function showsoul(event: MouseEvent, column: any, key: string) {
console.log(event); console.log(event);
soulleft.value = event.pageX; soulleft.value = event.pageX;
soultop.value = event.pageY; soultop.value = event.pageY;
soulstatus.value = true; soulstatus.value = true;
selcolumn.value = column; selcolumn.value = column;
soulkey.value = key soulkey.value = key;
} }
const heddin = () => { const heddin = () => {
soulkey.value = "" soulkey.value = "";
} };
function asc(event: any) { function asc(event: any) {
selcolumn.value.soulclass = "soul-icon-filter-asc" selcolumn.value.soulclass = "soul-icon-filter-asc";
sortTable(event, selcolumn.value.key, "asc", true) sortTable(event, selcolumn.value.key, "asc", true);
} }
function desc(event: any) { function desc(event: any) {
selcolumn.value.soulclass = "soul-icon-filter-desc" selcolumn.value.soulclass = "soul-icon-filter-desc";
sortTable(event, selcolumn.value.key, "desc", true) sortTable(event, selcolumn.value.key, "desc", true);
} }
function sx(e:any){ function sx(e: any) {
sxlist.value[e.key] = e.list sxlist.value[e.key] = e.list;
} }
watch(sxlist,()=>{ watch(
// tableDataSource sxlist,
let list:any = [...props.dataSource] () => {
let endlist:any = [] // tableDataSource
for(let i in sxlist.value){ let list: any = [...props.dataSource];
for(let j in list){ let endlist: any = [];
if(list[j] != "" && sxlist.value[i].length != 0){ for (let i in sxlist.value) {
if(!sxlist.value[i].includes(list[j][i])){ for (let j in list) {
list[j] = "" if (list[j] != "" && sxlist.value[i].length != 0) {
if (!sxlist.value[i].includes(list[j][i])) {
list[j] = "";
} }
} }
} }
} }
for(let i of list){ for (let i of list) {
if(i != ""){ if (i != "") {
endlist.push(i) endlist.push(i);
} }
} }
if(!props.page){ if (!props.page) {
datalist.value = endlist datalist.value = endlist;
}else{ } else {
tableDataSource.value = endlist tableDataSource.value = endlist;
change({ change({
limit: props.page.limit, limit: props.page.limit,
current: pagecurrent || props.page.current current: pagecurrent || props.page.current,
}) });
} }
console.log("筛选",endlist) console.log("筛选", endlist);
},{ },
deep: true {
}) deep: true,
window.addEventListener("click", heddin) }
);
window.addEventListener("click", heddin);
// 将分页移入到组件内 // 将分页移入到组件内
</script> </script>
<template> <template>
@ -811,27 +816,50 @@ window.addEventListener("click", heddin)
</div> </div>
<div v-if="defaultToolbar" class="layui-table-tool-self"> <div v-if="defaultToolbar" class="layui-table-tool-self">
<!-- 筛选 --> <!-- 筛选 -->
<lay-dropdown v-if="showToolbar('filter')" updateAtScroll :style="toolbarStyle('filter')"> <lay-dropdown
v-if="showToolbar('filter')"
updateAtScroll
:style="toolbarStyle('filter')"
>
<div class="layui-inline" title="筛选" lay-event> <div class="layui-inline" title="筛选" lay-event>
<i class="layui-icon layui-icon-slider"></i> <i class="layui-icon layui-icon-slider"></i>
</div> </div>
<template #content> <template #content>
<div class="layui-table-tool-checkbox"> <div class="layui-table-tool-checkbox">
<lay-checkbox v-for="column in tableHeadColumns[0]" v-model="tableColumnKeys" skin="primary" <lay-checkbox
:disabled="column.children" :key="column.key" :value="column.key">{{ column.title }}</lay-checkbox> v-for="column in tableHeadColumns[0]"
v-model="tableColumnKeys"
skin="primary"
:disabled="column.children"
:key="column.key"
:value="column.key"
>{{ column.title }}</lay-checkbox
>
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
<!-- 导出 --> <!-- 导出 -->
<div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')" <div
@click="exportData()"> v-if="showToolbar('export')"
class="layui-inline"
title="导出"
lay-event
:style="toolbarStyle('export')"
@click="exportData()"
>
<i class="layui-icon layui-icon-export"></i> <i class="layui-icon layui-icon-export"></i>
</div> </div>
<!-- 打印 --> <!-- 打印 -->
<div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event <div
@click="print()"> v-if="showToolbar('print')"
:style="toolbarStyle('print')"
class="layui-inline"
title="打印"
lay-event
@click="print()"
>
<i class="layui-icon layui-icon-print"></i> <i class="layui-icon layui-icon-print"></i>
</div> </div>
</div> </div>
@ -843,26 +871,47 @@ window.addEventListener("click", heddin)
<div class="layui-table-box"> <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"> <div class="layui-table-header-wrapper" ref="tableHeader">
<table class="layui-table" :lay-size="size" :lay-skin="skin" ref="tableHeaderTable"> <table
class="layui-table"
:lay-size="size"
:lay-skin="skin"
ref="tableHeaderTable"
>
<colgroup> <colgroup>
<template v-for="column in tableBodyColumns" :key="column"> <template v-for="column in tableBodyColumns" :key="column">
<template v-if="tableColumnKeys.includes(column.key)"> <template v-if="tableColumnKeys.includes(column.key)">
<col :width="column.width" :style="{ <col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '50px', minWidth: column.minWidth ? column.minWidth : '50px',
}" /> }"
/>
</template> </template>
</template> </template>
</colgroup> </colgroup>
<thead> <thead>
<template v-for="( <template
v-for="(
tableHeadColumn, tableHeadColumnIndex tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns" :key="tableHeadColumnIndex"> ) in tableHeadColumns"
:key="tableHeadColumnIndex"
>
<tr> <tr>
<template v-for="(column, columnIndex) in tableHeadColumn" :key="column"> <template
<th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan" v-for="(column, columnIndex) in tableHeadColumn"
class="layui-table-cell" :class="[ :key="column"
>
<th
v-if="tableColumnKeys.includes(column.key)"
:colspan="column.colspan"
:rowspan="column.rowspan"
class="layui-table-cell"
:class="[
renderFixedClassName(column, columnIndex), renderFixedClassName(column, columnIndex),
column.fixed column.fixed
? `layui-table-fixed-${column.fixed}` ? `layui-table-fixed-${column.fixed}`
@ -876,7 +925,8 @@ window.addEventListener("click", heddin)
column.type == 'number' column.type == 'number'
? 'layui-table-cell-number' ? 'layui-table-cell-number'
: '', : '',
]" :style="[ ]"
:style="[
{ {
textAlign: column.align, textAlign: column.align,
}, },
@ -885,10 +935,16 @@ window.addEventListener("click", heddin)
columnIndex, columnIndex,
tableHeadColumn tableHeadColumn
), ),
]"> ]"
>
<template v-if="column.type == 'checkbox'"> <template v-if="column.type == 'checkbox'">
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all" <lay-checkbox
@change="changeAll" /> v-model="hasChecked"
:is-indeterminate="!allChecked"
skin="primary"
value="all"
@change="changeAll"
/>
</template> </template>
<template v-else> <template v-else>
<span> <span>
@ -900,16 +956,33 @@ window.addEventListener("click", heddin)
</template> </template>
</span> </span>
<!-- 插槽 --> <!-- 插槽 -->
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort> <span
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc" v-if="column.sort"
title="升序"></i> class="layui-table-sort layui-inline"
<i @click.stop=" 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') sortTable($event, column.key, 'desc')
" class="layui-edge layui-table-sort-desc" title="降序"></i> "
class="layui-edge layui-table-sort-desc"
title="降序"
></i>
</span> </span>
<span v-if="column.soul" class="layui-table-sort layui-inline soul-icon"> <span
<i class="soul-icon soul-box" :class="column.soulclass || 'soul-icon-filter'" v-if="column.soul"
@click.stop="showsoul($event, column, column.key)"> class="layui-table-sort layui-inline soul-icon"
>
<i
class="soul-icon soul-box"
:class="column.soulclass || 'soul-icon-filter'"
@click.stop="showsoul($event, column, column.key)"
>
<!-- <div v-show="column.soulshow" @click.stop="" class="soulbox"> <!-- <div v-show="column.soulshow" @click.stop="" class="soulbox">
11111 11111
</div> --> </div> -->
@ -925,29 +998,61 @@ window.addEventListener("click", heddin)
</div> </div>
</div> </div>
<!-- 表身 --> <!-- 表身 -->
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }" ref="tableBody"> <div
<table class="layui-table" v-if="datalist.length > 0 && loading == false" class="layui-table-body layui-table-main"
:class="{ 'layui-table-even': props.even }" :lay-size="size" :lay-skin="skin"> :style="{ height: height, maxHeight: maxHeight }"
ref="tableBody"
>
<table
class="layui-table"
v-if="datalist.length > 0 && loading == false"
:class="{ 'layui-table-even': props.even }"
:lay-size="size"
:lay-skin="skin"
>
<colgroup> <colgroup>
<template v-for="(column, columnIndex) in tableBodyColumns" :key="columnIndex"> <template
v-for="(column, columnIndex) in tableBodyColumns"
:key="columnIndex"
>
<template v-if="tableColumnKeys.includes(column.key)"> <template v-if="tableColumnKeys.includes(column.key)">
<col :width="column.width" :style="{ <col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '50px', minWidth: column.minWidth ? column.minWidth : '50px',
}" /> }"
/>
</template> </template>
</template> </template>
</colgroup> </colgroup>
<tbody> <tbody>
<!-- 渲染 --> <!-- 渲染 -->
<template v-for="(children, index) in datalist" :key="index"> <template v-for="(children, index) in datalist" :key="index">
<table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize" <table-row
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys" :id="id"
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle" :index="index"
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName" :data="children"
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" :getCheckboxProps="getCheckboxProps" :columns="tableBodyColumns"
:getRadioProps="getRadioProps" v-model:expandKeys="tableExpandKeys" :indent-size="indentSize"
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey" @row="rowClick" :currentIndentSize="currentIndentSize"
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu"> :tableColumnKeys="tableColumnKeys"
:expandSpace="childrenExpandSpace"
:expandIndex="expandIndex"
:cellStyle="cellStyle"
:cellClassName="cellClassName"
:rowStyle="rowStyle"
:rowClassName="rowClassName"
:spanMethod="spanMethod"
:defaultExpandAll="defaultExpandAll"
:getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps"
v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey"
@row="rowClick"
@row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu"
>
<template v-for="name in slotsData" #[name]="{ data }"> <template v-for="name in slotsData" #[name]="{ data }">
<slot :name="name" :data="data"></slot> <slot :name="name" :data="data"></slot>
</template> </template>
@ -957,9 +1062,13 @@ window.addEventListener("click", heddin)
</table-row> </table-row>
</template> </template>
<tr v-if="hasTotalRow" class="layui-table-total"> <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)"> <template v-if="tableColumnKeys.includes(column.key)">
<td :style="[ <td
:style="[
{ {
textAlign: column.align, textAlign: column.align,
whiteSpace: column.ellipsisTooltip whiteSpace: column.ellipsisTooltip
@ -967,11 +1076,14 @@ window.addEventListener("click", heddin)
: 'normal', : 'normal',
}, },
renderFixedStyle(column, columnIndex), renderFixedStyle(column, columnIndex),
]" :class="[ ]"
:class="[
'layui-table-cell', 'layui-table-cell',
renderFixedClassName(column, columnIndex), renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '', column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]" v-html="renderTotalRowCell(column)"></td> ]"
v-html="renderTotalRowCell(column)"
></td>
</template> </template>
</template> </template>
</tr> </tr>
@ -983,7 +1095,9 @@ window.addEventListener("click", heddin)
</template> </template>
<template v-if="loading == true"> <template v-if="loading == true">
<div class="layui-table-loading"> <div class="layui-table-loading">
<i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i> <i
class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
></i>
</div> </div>
</template> </template>
</div> </div>
@ -992,22 +1106,40 @@ window.addEventListener("click", heddin)
</div> </div>
</div> </div>
<div v-if="page && page.total > 0" class="layui-table-page"> <div v-if="page && page.total > 0" class="layui-table-page">
<table-page :total="page.total" :pages="page.pages" :theme="page.theme" :limits="page.limits" <table-page
:showSkip="page.showSkip" :show-page="page.showPage" :showRefresh="page.showRefresh" :showLimit="page.showLimit" :total="page.total"
:showCount="page.showCount" :count="page.count" v-model:current="page.current" v-model:limit="page.limit" :pages="page.pages"
@change="change"> :theme="page.theme"
:limits="page.limits"
:showSkip="page.showSkip"
:show-page="page.showPage"
:showRefresh="page.showRefresh"
:showLimit="page.showLimit"
:showCount="page.showCount"
:count="page.count"
v-model:current="page.current"
v-model:limit="page.limit"
@change="change"
>
</table-page> </table-page>
</div> </div>
</div> </div>
<div v-for="( <div
tableHeadColumn, tableHeadColumnIndex v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns"
) in tableHeadColumns" :key="tableHeadColumnIndex"> :key="tableHeadColumnIndex"
>
<div v-for="(column, columnIndex) in tableHeadColumn" :key="column"> <div v-for="(column, columnIndex) in tableHeadColumn" :key="column">
<soultable :top="soultop" :left="soulleft" v-show="soulkey == column.key" @asc="asc" @desc="desc" :list="props.dataSource" <soultable
:soulkey="column.key" @sx="sx"></soultable> :top="soultop"
:left="soulleft"
v-show="soulkey == column.key"
@asc="asc"
@desc="desc"
:list="props.dataSource"
:soulkey="column.key"
@sx="sx"
></soultable>
</div> </div>
</div> </div>
</div> </div>
</template> </template>

162
src/component/table/soultable.vue
View File

@ -1,120 +1,146 @@
<template> <template>
<div class="soulbox" :style="`top: ${props.top}px;left:${props.left}px`" @click.stop=""> <div
class="soulbox"
:style="`top: ${props.top}px;left:${props.left}px`"
@click.stop=""
>
<ul> <ul>
<li @click="asc" class="soul-sort" data-value="asc" style=""><i class="soul-icon soul-icon-asc"></i> 升序排列 </li> <li @click="asc" class="soul-sort" data-value="asc" style="">
<li @click="desc" class="soul-sort" data-value="desc" style="border-bottom: 1px solid rgb(230, 230, 230);"><i <i class="soul-icon soul-icon-asc"></i> 升序排列
class="soul-icon soul-icon-desc"></i> 降序排列 </li> </li>
<li
@click="desc"
class="soul-sort"
data-value="desc"
style="border-bottom: 1px solid rgb(230, 230, 230)"
>
<i class="soul-icon soul-icon-desc"></i> 降序排列
</li>
<!-- <li class="soul-column" style=""><i class="layui-icon layui-icon-table"></i> 表格列 <i <!-- <li class="soul-column" style=""><i class="layui-icon layui-icon-table"></i> 表格列 <i
class="layui-icon layui-icon-right" style="float: right"></i></li> --> class="layui-icon layui-icon-right" style="float: right"></i></li> -->
<li class="soul-dropList" style="" @mouseover="selshow = true"><i class="soul-icon soul-icon-drop-list"></i> 筛选数据 <i <li class="soul-dropList" style="" @mouseover="selshow = true">
class="layui-icon layui-icon-right" style="float: right"></i></li> <i class="soul-icon soul-icon-drop-list"></i> 筛选数据
<i class="layui-icon layui-icon-right" style="float: right"></i>
</li>
<!-- <li class="soul-condition" style=""><i class="soul-icon soul-icon-query"></i> 筛选条件 <i <!-- <li class="soul-condition" style=""><i class="soul-icon soul-icon-query"></i> 筛选条件 <i
class="layui-icon layui-icon-right" style="float: right"></i></li> class="layui-icon layui-icon-right" style="float: right"></i></li>
<li class="soul-edit-condition" style=""><i class="layui-icon layui-icon-edit"></i> 编辑筛选条件 </li> <li class="soul-edit-condition" style=""><i class="layui-icon layui-icon-edit"></i> 编辑筛选条件 </li>
<li class="soul-export" style=""><i class="soul-icon soul-icon-download"></i> 导出excel </li> --> <li class="soul-export" style=""><i class="soul-icon soul-icon-download"></i> 导出excel </li> -->
</ul> </ul>
<div class="soulbox" style="left: 100%;top:65px" v-show="selshow"> <div class="soulbox" style="left: 100%; top: 65px" v-show="selshow">
<lay-input prefix-icon="layui-icon-search" v-model="seltext" size="sm" placeholder="关键字搜索"> <lay-input
prefix-icon="layui-icon-search"
v-model="seltext"
size="sm"
placeholder="关键字搜索"
>
</lay-input> </lay-input>
<div class="check" style="min-width: 180px;"> <div class="check" style="min-width: 180px">
<div class="multiOption" data-type="all" @click="select(1)"><i class="soul-icon"></i> 全选</div> <div class="multiOption" data-type="all" @click="select(1)">
<div class="multiOption" data-type="none" @click="select(2)"><i class="soul-icon"></i> 清空</div> <i class="soul-icon"></i> 全选
<div class="multiOption" data-type="reverse" @click="select(3)"><i class="soul-icon"></i>反选</div> </div>
<div class="multiOption" data-type="none" @click="select(2)">
<i class="soul-icon"></i> 清空
</div>
<div class="multiOption" data-type="reverse" @click="select(3)">
<i class="soul-icon"></i>反选
</div>
</div> </div>
<ul> <ul>
<LayCheckboxGroup v-model="sel"> <LayCheckboxGroup v-model="sel">
<li v-for="i, j in list"> <li v-for="(i, j) in list">
<LayCheckbox skin="primary" :value="i"></LayCheckbox>{{ i }} <LayCheckbox skin="primary" :value="i"></LayCheckbox>{{ i }}
</li> </li>
</LayCheckboxGroup> </LayCheckboxGroup>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import "./soultable.less" import "./soultable.less";
import { ref, watch, withDefaults } from "vue"; import { ref, watch, withDefaults } from "vue";
import layInput from "../input/index.vue" import layInput from "../input/index.vue";
import LayCheckbox from "../checkbox/index.vue"; import LayCheckbox from "../checkbox/index.vue";
import LayCheckboxGroup from "../checkboxGroup/index.vue"; import LayCheckboxGroup from "../checkboxGroup/index.vue";
export interface SoulTableProps { export interface SoulTableProps {
left: number, left: number;
top: number, top: number;
list: any, list: any;
soulkey: string, soulkey: string;
} }
const props = withDefaults(defineProps<SoulTableProps>(), { const props = withDefaults(defineProps<SoulTableProps>(), {
top: 10, top: 10,
left: 10, left: 10,
list: [], list: [],
soulkey: "" soulkey: "",
}) });
const emit = defineEmits(["asc", "desc","sx"]) const emit = defineEmits(["asc", "desc", "sx"]);
function asc(event: any) { function asc(event: any) {
emit("asc", event) emit("asc", event);
} }
function desc(event: any) { function desc(event: any) {
emit("desc", event) emit("desc", event);
} }
const sel:any = ref([]) const sel: any = ref([]);
const list: any = ref([]) const list: any = ref([]);
const alllist:any = ref([]) const alllist: any = ref([]);
watch(() => [props.list,props.soulkey], () => { watch(
let set = new Set() () => [props.list, props.soulkey],
() => {
let set = new Set();
for (let i of props.list) { for (let i of props.list) {
set.add(i[props.soulkey]) set.add(i[props.soulkey]);
console.log(i, i[props.soulkey]) console.log(i, i[props.soulkey]);
} }
alllist.value = Array.from(set) alllist.value = Array.from(set);
list.value = alllist.value list.value = alllist.value;
console.log(list.value) console.log(list.value);
}, },
{ deep: true }) { deep: true }
);
// watch(alllist,()=>{ // watch(alllist,()=>{
// list.value = [] // list.value = []
// for(let i of list){ // for(let i of list){
// } // }
// }) // })
const seltext = ref("") const seltext = ref("");
watch(seltext,()=>{ watch(seltext, () => {
let l = [] let l = [];
if(seltext.value){ if (seltext.value) {
for(let i of alllist.value){ for (let i of alllist.value) {
if(i.indexOf(seltext.value) != -1){ if (i.indexOf(seltext.value) != -1) {
l.push(i) l.push(i);
} }
} }
}else{ } else {
l = alllist.value l = alllist.value;
} }
list.value = l list.value = l;
}) });
watch(sel,()=>{ watch(sel, () => {
emit("sx",{key:props.soulkey,list:sel.value}) emit("sx", { key: props.soulkey, list: sel.value });
}) });
function select(type: number){ function select(type: number) {
if(type == 1){ if (type == 1) {
sel.value = [] sel.value = [];
let t = [] let t = [];
for(let i of list.value){ for (let i of list.value) {
t.push(i) t.push(i);
} }
sel.value = t sel.value = t;
}else if(type == 3){ } else if (type == 3) {
let t = [] let t = [];
for(let i of list.value){ for (let i of list.value) {
if(!sel.value.includes(i)){ if (!sel.value.includes(i)) {
t.push(i) t.push(i);
} }
} }
sel.value = t sel.value = t;
}else if(type == 2){ } else if (type == 2) {
sel.value = [] sel.value = [];
} }
} }
const selshow = ref(false) const selshow = ref(false);
</script> </script>