代码规范
This commit is contained in:
parent
0cb74e4f10
commit
bcbe71c7ad
@ -116,8 +116,8 @@ props.columns.map((value: any) => {
|
||||
});
|
||||
|
||||
const rowClick = function (data: any, evt: MouseEvent) {
|
||||
let click = new Event("click")
|
||||
window.dispatchEvent(click)
|
||||
let click = new Event("click");
|
||||
window.dispatchEvent(click);
|
||||
emit("row", data, evt);
|
||||
};
|
||||
|
||||
|
||||
@ -71,11 +71,11 @@ const props = withDefaults(defineProps<TableProps>(), {
|
||||
rowStyle: "",
|
||||
cellStyle: "",
|
||||
defaultExpandAll: false,
|
||||
spanMethod: () => { },
|
||||
spanMethod: () => {},
|
||||
expandKeys: () => [],
|
||||
loading: false,
|
||||
getCheckboxProps: () => { },
|
||||
getRadioProps: () => { },
|
||||
getCheckboxProps: () => {},
|
||||
getRadioProps: () => {},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
@ -86,15 +86,15 @@ const emit = defineEmits([
|
||||
"row-contextmenu",
|
||||
"row-double",
|
||||
"row",
|
||||
"update:page"
|
||||
"update:page",
|
||||
]);
|
||||
|
||||
const slot = useSlots();
|
||||
const slots = slot.default && slot.default();
|
||||
const tableRef = ref();
|
||||
|
||||
const datalist = ref([...props.dataSource])
|
||||
console.log(datalist.value,97)
|
||||
const datalist = ref([...props.dataSource]);
|
||||
console.log(datalist.value, 97);
|
||||
const s = "";
|
||||
const allChecked = ref(false);
|
||||
const hasChecked = ref(false);
|
||||
@ -323,28 +323,31 @@ watch(
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
watch(tableDataSource,()=>{
|
||||
if(!props.page){
|
||||
datalist.value = tableDataSource.value
|
||||
}else{
|
||||
watch(tableDataSource, () => {
|
||||
if (!props.page) {
|
||||
datalist.value = tableDataSource.value;
|
||||
} else {
|
||||
// props.page.count = tableDataSource.value.length
|
||||
let tmp ={...props.page}
|
||||
tmp.total = tableDataSource.value.length
|
||||
emit("update:page",tmp)
|
||||
let tmp = { ...props.page };
|
||||
tmp.total = tableDataSource.value.length;
|
||||
emit("update:page", tmp);
|
||||
// tableDataSource.value = endlist
|
||||
change({
|
||||
limit: props.page.limit,
|
||||
current: pagecurrent || props.page.current
|
||||
})
|
||||
current: pagecurrent || props.page.current,
|
||||
});
|
||||
}
|
||||
})
|
||||
watch(()=>props.page,()=>{
|
||||
console.log(props.page,342)
|
||||
})
|
||||
let pagecurrent:number;
|
||||
});
|
||||
watch(
|
||||
() => props.page,
|
||||
() => {
|
||||
console.log(props.page, 342);
|
||||
}
|
||||
);
|
||||
let pagecurrent: number;
|
||||
const change = function (page: any) {
|
||||
// emit("change", page);
|
||||
pagecurrent = page.current
|
||||
pagecurrent = page.current;
|
||||
datalist.value = tableDataSource.value.slice(
|
||||
page.limit * (page.current - 1),
|
||||
page.limit * page.current
|
||||
@ -738,67 +741,69 @@ onBeforeUnmount(() => {
|
||||
const soulstatus = ref(false);
|
||||
const soultop = ref(0);
|
||||
const soulleft = ref(0);
|
||||
const selcolumn = ref<any>({})
|
||||
const soulkey = ref("")
|
||||
const sxlist:any = ref({})
|
||||
const selcolumn = ref<any>({});
|
||||
const soulkey = ref("");
|
||||
const sxlist: any = ref({});
|
||||
function showsoul(event: MouseEvent, column: any, key: string) {
|
||||
console.log(event);
|
||||
soulleft.value = event.pageX;
|
||||
soultop.value = event.pageY;
|
||||
soulstatus.value = true;
|
||||
selcolumn.value = column;
|
||||
soulkey.value = key
|
||||
soulkey.value = key;
|
||||
}
|
||||
const heddin = () => {
|
||||
soulkey.value = ""
|
||||
}
|
||||
soulkey.value = "";
|
||||
};
|
||||
function asc(event: any) {
|
||||
selcolumn.value.soulclass = "soul-icon-filter-asc"
|
||||
sortTable(event, selcolumn.value.key, "asc", true)
|
||||
selcolumn.value.soulclass = "soul-icon-filter-asc";
|
||||
sortTable(event, selcolumn.value.key, "asc", true);
|
||||
}
|
||||
function desc(event: any) {
|
||||
selcolumn.value.soulclass = "soul-icon-filter-desc"
|
||||
sortTable(event, selcolumn.value.key, "desc", true)
|
||||
selcolumn.value.soulclass = "soul-icon-filter-desc";
|
||||
sortTable(event, selcolumn.value.key, "desc", true);
|
||||
}
|
||||
|
||||
function sx(e:any){
|
||||
sxlist.value[e.key] = e.list
|
||||
|
||||
function sx(e: any) {
|
||||
sxlist.value[e.key] = e.list;
|
||||
}
|
||||
watch(sxlist,()=>{
|
||||
// tableDataSource
|
||||
let list:any = [...props.dataSource]
|
||||
let endlist:any = []
|
||||
for(let i in sxlist.value){
|
||||
for(let j in list){
|
||||
if(list[j] != "" && sxlist.value[i].length != 0){
|
||||
if(!sxlist.value[i].includes(list[j][i])){
|
||||
list[j] = ""
|
||||
watch(
|
||||
sxlist,
|
||||
() => {
|
||||
// tableDataSource
|
||||
let list: any = [...props.dataSource];
|
||||
let endlist: any = [];
|
||||
for (let i in sxlist.value) {
|
||||
for (let j in list) {
|
||||
if (list[j] != "" && sxlist.value[i].length != 0) {
|
||||
if (!sxlist.value[i].includes(list[j][i])) {
|
||||
list[j] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for(let i of list){
|
||||
if(i != ""){
|
||||
endlist.push(i)
|
||||
for (let i of list) {
|
||||
if (i != "") {
|
||||
endlist.push(i);
|
||||
}
|
||||
}
|
||||
if(!props.page){
|
||||
datalist.value = endlist
|
||||
}else{
|
||||
tableDataSource.value = endlist
|
||||
if (!props.page) {
|
||||
datalist.value = endlist;
|
||||
} else {
|
||||
tableDataSource.value = endlist;
|
||||
change({
|
||||
limit: props.page.limit,
|
||||
current: pagecurrent || props.page.current
|
||||
})
|
||||
current: pagecurrent || props.page.current,
|
||||
});
|
||||
}
|
||||
console.log("筛选",endlist)
|
||||
},{
|
||||
deep: true
|
||||
})
|
||||
window.addEventListener("click", heddin)
|
||||
console.log("筛选", endlist);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
window.addEventListener("click", heddin);
|
||||
// 将分页移入到组件内
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -811,27 +816,50 @@ window.addEventListener("click", heddin)
|
||||
</div>
|
||||
<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>
|
||||
<i class="layui-icon layui-icon-slider"></i>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="layui-table-tool-checkbox">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<!-- 导出 -->
|
||||
<div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')"
|
||||
@click="exportData()">
|
||||
<div
|
||||
v-if="showToolbar('export')"
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event
|
||||
:style="toolbarStyle('export')"
|
||||
@click="exportData()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
|
||||
<!-- 打印 -->
|
||||
<div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event
|
||||
@click="print()">
|
||||
<div
|
||||
v-if="showToolbar('print')"
|
||||
:style="toolbarStyle('print')"
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event
|
||||
@click="print()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -843,26 +871,47 @@ window.addEventListener("click", heddin)
|
||||
|
||||
<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" ref="tableHeaderTable">
|
||||
<table
|
||||
class="layui-table"
|
||||
:lay-size="size"
|
||||
:lay-skin="skin"
|
||||
ref="tableHeaderTable"
|
||||
>
|
||||
<colgroup>
|
||||
<template v-for="column in tableBodyColumns" :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>
|
||||
<template v-for="(
|
||||
<template
|
||||
v-for="(
|
||||
tableHeadColumn, tableHeadColumnIndex
|
||||
) in tableHeadColumns" :key="tableHeadColumnIndex">
|
||||
) in tableHeadColumns"
|
||||
:key="tableHeadColumnIndex"
|
||||
>
|
||||
<tr>
|
||||
<template v-for="(column, columnIndex) in tableHeadColumn" :key="column">
|
||||
<th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan"
|
||||
class="layui-table-cell" :class="[
|
||||
<template
|
||||
v-for="(column, columnIndex) in tableHeadColumn"
|
||||
:key="column"
|
||||
>
|
||||
<th
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
:colspan="column.colspan"
|
||||
:rowspan="column.rowspan"
|
||||
class="layui-table-cell"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.fixed
|
||||
? `layui-table-fixed-${column.fixed}`
|
||||
@ -876,7 +925,8 @@ window.addEventListener("click", heddin)
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]" :style="[
|
||||
]"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
@ -885,10 +935,16 @@ window.addEventListener("click", heddin)
|
||||
columnIndex,
|
||||
tableHeadColumn
|
||||
),
|
||||
]">
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
@ -900,16 +956,33 @@ window.addEventListener("click", heddin)
|
||||
</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="
|
||||
<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>
|
||||
"
|
||||
class="layui-edge layui-table-sort-desc"
|
||||
title="降序"
|
||||
></i>
|
||||
</span>
|
||||
<span v-if="column.soul" 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)">
|
||||
<span
|
||||
v-if="column.soul"
|
||||
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">
|
||||
11111
|
||||
</div> -->
|
||||
@ -925,29 +998,61 @@ window.addEventListener("click", heddin)
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表身 -->
|
||||
<div class="layui-table-body layui-table-main" :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">
|
||||
<div
|
||||
class="layui-table-body layui-table-main"
|
||||
: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>
|
||||
<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)">
|
||||
<col :width="column.width" :style="{
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- 渲染 -->
|
||||
<template v-for="(children, index) in datalist" :key="index">
|
||||
<table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize" :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">
|
||||
<table-row
|
||||
:id="id"
|
||||
:index="index"
|
||||
:data="children"
|
||||
:columns="tableBodyColumns"
|
||||
:indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize"
|
||||
: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 }">
|
||||
<slot :name="name" :data="data"></slot>
|
||||
</template>
|
||||
@ -957,9 +1062,13 @@ window.addEventListener("click", heddin)
|
||||
</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 :style="[
|
||||
<td
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip
|
||||
@ -967,11 +1076,14 @@ window.addEventListener("click", heddin)
|
||||
: 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]" :class="[
|
||||
]"
|
||||
:class="[
|
||||
'layui-table-cell',
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]" v-html="renderTotalRowCell(column)"></td>
|
||||
]"
|
||||
v-html="renderTotalRowCell(column)"
|
||||
></td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
@ -983,7 +1095,9 @@ window.addEventListener("click", heddin)
|
||||
</template>
|
||||
<template v-if="loading == true">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
@ -992,22 +1106,40 @@ window.addEventListener("click", heddin)
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
: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
|
||||
:total="page.total"
|
||||
:pages="page.pages"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(
|
||||
tableHeadColumn, tableHeadColumnIndex
|
||||
) in tableHeadColumns" :key="tableHeadColumnIndex">
|
||||
<div
|
||||
v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns"
|
||||
:key="tableHeadColumnIndex"
|
||||
>
|
||||
<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"
|
||||
:soulkey="column.key" @sx="sx"></soultable>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -1,120 +1,146 @@
|
||||
<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>
|
||||
<li @click="asc" class="soul-sort" data-value="asc" style=""><i class="soul-icon soul-icon-asc"></i> 升序排列 </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 @click="asc" class="soul-sort" data-value="asc" style="">
|
||||
<i class="soul-icon soul-icon-asc"></i> 升序排列
|
||||
</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
|
||||
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
|
||||
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 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
|
||||
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-export" style=""><i class="soul-icon soul-icon-download"></i> 导出excel </li> -->
|
||||
</ul>
|
||||
<div class="soulbox" style="left: 100%;top:65px" v-show="selshow">
|
||||
<lay-input prefix-icon="layui-icon-search" v-model="seltext" size="sm" placeholder="关键字搜索">
|
||||
<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>
|
||||
<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="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 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="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>
|
||||
<ul>
|
||||
<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 }}
|
||||
</li>
|
||||
</LayCheckboxGroup>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "./soultable.less"
|
||||
import "./soultable.less";
|
||||
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 LayCheckboxGroup from "../checkboxGroup/index.vue";
|
||||
export interface SoulTableProps {
|
||||
left: number,
|
||||
top: number,
|
||||
list: any,
|
||||
soulkey: string,
|
||||
left: number;
|
||||
top: number;
|
||||
list: any;
|
||||
soulkey: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<SoulTableProps>(), {
|
||||
top: 10,
|
||||
left: 10,
|
||||
list: [],
|
||||
soulkey: ""
|
||||
})
|
||||
const emit = defineEmits(["asc", "desc","sx"])
|
||||
soulkey: "",
|
||||
});
|
||||
const emit = defineEmits(["asc", "desc", "sx"]);
|
||||
function asc(event: any) {
|
||||
emit("asc", event)
|
||||
emit("asc", event);
|
||||
}
|
||||
function desc(event: any) {
|
||||
emit("desc", event)
|
||||
emit("desc", event);
|
||||
}
|
||||
const sel:any = ref([])
|
||||
const list: any = ref([])
|
||||
const alllist:any = ref([])
|
||||
watch(() => [props.list,props.soulkey], () => {
|
||||
let set = new Set()
|
||||
const sel: any = ref([]);
|
||||
const list: any = ref([]);
|
||||
const alllist: any = ref([]);
|
||||
watch(
|
||||
() => [props.list, props.soulkey],
|
||||
() => {
|
||||
let set = new Set();
|
||||
for (let i of props.list) {
|
||||
set.add(i[props.soulkey])
|
||||
console.log(i, i[props.soulkey])
|
||||
set.add(i[props.soulkey]);
|
||||
console.log(i, i[props.soulkey]);
|
||||
}
|
||||
alllist.value = Array.from(set)
|
||||
list.value = alllist.value
|
||||
console.log(list.value)
|
||||
},
|
||||
{ deep: true })
|
||||
alllist.value = Array.from(set);
|
||||
list.value = alllist.value;
|
||||
console.log(list.value);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// watch(alllist,()=>{
|
||||
// list.value = []
|
||||
// for(let i of list){
|
||||
|
||||
// }
|
||||
// })
|
||||
const seltext = ref("")
|
||||
watch(seltext,()=>{
|
||||
let l = []
|
||||
if(seltext.value){
|
||||
for(let i of alllist.value){
|
||||
if(i.indexOf(seltext.value) != -1){
|
||||
l.push(i)
|
||||
const seltext = ref("");
|
||||
watch(seltext, () => {
|
||||
let l = [];
|
||||
if (seltext.value) {
|
||||
for (let i of alllist.value) {
|
||||
if (i.indexOf(seltext.value) != -1) {
|
||||
l.push(i);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
l = alllist.value
|
||||
} else {
|
||||
l = alllist.value;
|
||||
}
|
||||
list.value = l
|
||||
})
|
||||
watch(sel,()=>{
|
||||
emit("sx",{key:props.soulkey,list:sel.value})
|
||||
})
|
||||
function select(type: number){
|
||||
if(type == 1){
|
||||
sel.value = []
|
||||
let t = []
|
||||
for(let i of list.value){
|
||||
t.push(i)
|
||||
list.value = l;
|
||||
});
|
||||
watch(sel, () => {
|
||||
emit("sx", { key: props.soulkey, list: sel.value });
|
||||
});
|
||||
function select(type: number) {
|
||||
if (type == 1) {
|
||||
sel.value = [];
|
||||
let t = [];
|
||||
for (let i of list.value) {
|
||||
t.push(i);
|
||||
}
|
||||
sel.value = t
|
||||
}else if(type == 3){
|
||||
let t = []
|
||||
for(let i of list.value){
|
||||
if(!sel.value.includes(i)){
|
||||
t.push(i)
|
||||
sel.value = t;
|
||||
} else if (type == 3) {
|
||||
let t = [];
|
||||
for (let i of list.value) {
|
||||
if (!sel.value.includes(i)) {
|
||||
t.push(i);
|
||||
}
|
||||
}
|
||||
sel.value = t
|
||||
}else if(type == 2){
|
||||
sel.value = []
|
||||
sel.value = t;
|
||||
} else if (type == 2) {
|
||||
sel.value = [];
|
||||
}
|
||||
}
|
||||
const selshow = ref(false)
|
||||
|
||||
const selshow = ref(false);
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user