layui-vue/src/component/table/soultable.vue

<template>
  <div
    class="soulbox"
    :style="`top: ${props.top}px;left:${props.left}px`"
    @click.stop=""
  >
    <ul @mouseover="shubiao">
      <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="" show="select">
        <i class="soul-icon soul-icon-drop-list" show="select"></i> 筛选数据
        <i
          class="layui-icon layui-icon-right"
          style="float: right"
          show="select"
        ></i>
      </li>
      <li
        @click="daochu"
        class="soul-sort"
        data-value="desc"
        style="border-bottom: 1px solid rgb(230, 230, 230)"
      >
        <i class="soul-icon soul-icon-download"></i> 导出excel
      </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="关键字搜索"
      >
      </lay-input>
      <div class="check" style="min-width: 190px">
        <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 style="max-height: 300px; overflow: auto">
        <LayCheckboxGroup v-model="sel">
          <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 { ref, watch, withDefaults } from "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;
  show: boolean;
}
const props = withDefaults(defineProps<SoulTableProps>(), {
  top: 10,
  left: 10,
  list: [],
  soulkey: "",
  show: false,
});
const emit = defineEmits(["asc", "desc", "sx", "daochu"]);
function asc(event: any) {
  emit("asc", event);
}
function desc(event: any) {
  emit("desc", event);
}
function daochu() {
  emit("daochu");
}
const sel: any = ref([]);
const list: any = ref([]);
const alllist: any = ref([]);
watch(
  () => [props.show],
  () => {
    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;
    selshow.value = false;
    // 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);
      }
    }
  } 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);
    }
    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 = [];
  }
}
const selshow = ref(false);
function shubiao(event: any) {
  console.log(event, 160);
  if (event.target.getAttribute("show") == "select") {
    selshow.value = true;
  } else {
    selshow.value = false;
  }
}
</script>