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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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()
for (let i of props.list) {
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 })
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]);
}
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)
</script>
const selshow = ref(false);
</script>