添加筛选
This commit is contained in:
parent
0e1d469c76
commit
d712290847
@ -1,38 +1,5 @@
|
|||||||
import { w as withInstall } from "../badge/index2.js";
|
import { w as withInstall } from "../badge/index2.js";
|
||||||
import { defineComponent, ref, provide, watch, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
|
import { _ as _sfc_main } from "../index2.js";
|
||||||
const __default__ = {
|
import "vue";
|
||||||
name: "LayCheckboxGroup"
|
|
||||||
};
|
|
||||||
const _sfc_main = defineComponent({
|
|
||||||
...__default__,
|
|
||||||
props: {
|
|
||||||
modelValue: { default: () => [] },
|
|
||||||
disabled: { type: Boolean, default: false }
|
|
||||||
},
|
|
||||||
emits: ["update:modelValue", "change"],
|
|
||||||
setup(__props, { emit }) {
|
|
||||||
const props = __props;
|
|
||||||
const modelValue = ref(props.modelValue);
|
|
||||||
const disabled = ref(props.disabled);
|
|
||||||
provide("checkboxGroup", {
|
|
||||||
name: "LayCheckboxGroup",
|
|
||||||
modelValue,
|
|
||||||
disabled
|
|
||||||
});
|
|
||||||
watch(() => modelValue, (val) => {
|
|
||||||
emit("change", modelValue.value);
|
|
||||||
emit("update:modelValue", modelValue.value);
|
|
||||||
}, { deep: true });
|
|
||||||
watch(() => props.modelValue, (val) => modelValue.value = val);
|
|
||||||
watch(() => props.disabled, (val) => disabled.value = val);
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("div", {
|
|
||||||
class: normalizeClass(["layui-checkbox-group", { "layui-checkbox-group-disabled": disabled.value }])
|
|
||||||
}, [
|
|
||||||
renderSlot(_ctx.$slots, "default")
|
|
||||||
], 2);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const component = withInstall(_sfc_main);
|
const component = withInstall(_sfc_main);
|
||||||
export { component as default };
|
export { component as default };
|
||||||
|
@ -179,6 +179,7 @@ import "./_chunks/@vue/index.js";
|
|||||||
import "./_chunks/@vueuse/index.js";
|
import "./_chunks/@vueuse/index.js";
|
||||||
import "./useLevel/index.js";
|
import "./useLevel/index.js";
|
||||||
import "./utils/index.js";
|
import "./utils/index.js";
|
||||||
|
import "./index2.js";
|
||||||
import "./_chunks/@ctrl/index.js";
|
import "./_chunks/@ctrl/index.js";
|
||||||
import "./_chunks/async-validator/index.js";
|
import "./_chunks/async-validator/index.js";
|
||||||
import "./_chunks/evtd/index.js";
|
import "./_chunks/evtd/index.js";
|
||||||
|
36
es/index2.js
Normal file
36
es/index2.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { defineComponent, ref, provide, watch, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
|
||||||
|
const __default__ = {
|
||||||
|
name: "LayCheckboxGroup"
|
||||||
|
};
|
||||||
|
const _sfc_main = defineComponent({
|
||||||
|
...__default__,
|
||||||
|
props: {
|
||||||
|
modelValue: { default: () => [] },
|
||||||
|
disabled: { type: Boolean, default: false }
|
||||||
|
},
|
||||||
|
emits: ["update:modelValue", "change"],
|
||||||
|
setup(__props, { emit }) {
|
||||||
|
const props = __props;
|
||||||
|
const modelValue = ref(props.modelValue);
|
||||||
|
const disabled = ref(props.disabled);
|
||||||
|
provide("checkboxGroup", {
|
||||||
|
name: "LayCheckboxGroup",
|
||||||
|
modelValue,
|
||||||
|
disabled
|
||||||
|
});
|
||||||
|
watch(() => modelValue, (val) => {
|
||||||
|
emit("change", modelValue.value);
|
||||||
|
emit("update:modelValue", modelValue.value);
|
||||||
|
}, { deep: true });
|
||||||
|
watch(() => props.modelValue, (val) => modelValue.value = val);
|
||||||
|
watch(() => props.disabled, (val) => disabled.value = val);
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return openBlock(), createElementBlock("div", {
|
||||||
|
class: normalizeClass(["layui-checkbox-group", { "layui-checkbox-group-disabled": disabled.value }])
|
||||||
|
}, [
|
||||||
|
renderSlot(_ctx.$slots, "default")
|
||||||
|
], 2);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export { _sfc_main as _ };
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1375
lib/index.js
1375
lib/index.js
File diff suppressed because one or more lines are too long
@ -116,6 +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")
|
||||||
|
window.dispatchEvent(click)
|
||||||
emit("row", data, evt);
|
emit("row", data, evt);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
@import "../dropdown/index.less";
|
@import "../dropdown/index.less";
|
||||||
@import "../page/index.less";
|
@import "../page/index.less";
|
||||||
@import "../empty/index.less";
|
@import "../empty/index.less";
|
||||||
|
@import "../../css/soultable.less";
|
||||||
.layui-table-col-special {
|
.layui-table-col-special {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
}
|
}
|
||||||
|
@ -24,6 +24,7 @@ import LayEmpty from "../empty/index.vue";
|
|||||||
import TableRow from "./TableRow.vue";
|
import TableRow from "./TableRow.vue";
|
||||||
import TablePage from "./TablePage.vue";
|
import TablePage from "./TablePage.vue";
|
||||||
import { nextTick } from "vue";
|
import { nextTick } from "vue";
|
||||||
|
import soultable from "./soultable.vue";
|
||||||
|
|
||||||
export interface TableProps {
|
export interface TableProps {
|
||||||
id?: string;
|
id?: string;
|
||||||
@ -70,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([
|
||||||
@ -85,12 +86,15 @@ const emit = defineEmits([
|
|||||||
"row-contextmenu",
|
"row-contextmenu",
|
||||||
"row-double",
|
"row-double",
|
||||||
"row",
|
"row",
|
||||||
|
"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])
|
||||||
|
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);
|
||||||
@ -264,6 +268,15 @@ watch(
|
|||||||
() => props.dataSource,
|
() => props.dataSource,
|
||||||
() => {
|
() => {
|
||||||
tableDataSource.value = [...props.dataSource];
|
tableDataSource.value = [...props.dataSource];
|
||||||
|
// if(!props.page){
|
||||||
|
// datalist.value = [...props.dataSource]
|
||||||
|
// }else{
|
||||||
|
// change({
|
||||||
|
// limit: props.page.limit,
|
||||||
|
// current: pagecurrent || props.page.current
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
// 为什么修改数据就要把选中清空? 我要清空不会自己清吗?
|
// 为什么修改数据就要把选中清空? 我要清空不会自己清吗?
|
||||||
// tableSelectedKeys.value = [];
|
// tableSelectedKeys.value = [];
|
||||||
// tableSelectedKey.value = s;
|
// tableSelectedKey.value = s;
|
||||||
@ -310,9 +323,32 @@ watch(
|
|||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
|
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)
|
||||||
|
// tableDataSource.value = endlist
|
||||||
|
change({
|
||||||
|
limit: props.page.limit,
|
||||||
|
current: pagecurrent || props.page.current
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
watch(()=>props.page,()=>{
|
||||||
|
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
|
||||||
|
datalist.value = tableDataSource.value.slice(
|
||||||
|
page.limit * (page.current - 1),
|
||||||
|
page.limit * page.current
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const rowClick = function (data: any, evt: MouseEvent) {
|
const rowClick = function (data: any, evt: MouseEvent) {
|
||||||
@ -392,10 +428,10 @@ function base64(s: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 列排序
|
// 列排序
|
||||||
const sortTable = (e: any, key: string, sort: string) => {
|
const sortTable = (e: any, key: string, sort: string, issoul = false) => {
|
||||||
let currentSort = e.target.parentNode.getAttribute("lay-sort");
|
let currentSort = e.target.parentNode.getAttribute("lay-sort");
|
||||||
if (sort === "desc") {
|
if (sort === "desc") {
|
||||||
if (currentSort === sort) {
|
if (currentSort === sort && !issoul) {
|
||||||
e.target.parentNode.setAttribute("lay-sort", "");
|
e.target.parentNode.setAttribute("lay-sort", "");
|
||||||
tableDataSource.value = [...props.dataSource];
|
tableDataSource.value = [...props.dataSource];
|
||||||
} else {
|
} else {
|
||||||
@ -407,7 +443,7 @@ const sortTable = (e: any, key: string, sort: string) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (currentSort === sort) {
|
if (currentSort === sort && !issoul) {
|
||||||
e.target.parentNode.setAttribute("lay-sort", "");
|
e.target.parentNode.setAttribute("lay-sort", "");
|
||||||
tableDataSource.value = [...props.dataSource];
|
tableDataSource.value = [...props.dataSource];
|
||||||
} else {
|
} else {
|
||||||
@ -697,6 +733,72 @@ const toolbarStyle = (toolbarName: string) => {
|
|||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.onresize = null;
|
window.onresize = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 模仿soultable
|
||||||
|
const soulstatus = ref(false);
|
||||||
|
const soultop = ref(0);
|
||||||
|
const soulleft = ref(0);
|
||||||
|
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
|
||||||
|
}
|
||||||
|
const heddin = () => {
|
||||||
|
soulkey.value = ""
|
||||||
|
}
|
||||||
|
function asc(event: any) {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
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] = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(let i of list){
|
||||||
|
if(i != ""){
|
||||||
|
endlist.push(i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(!props.page){
|
||||||
|
datalist.value = endlist
|
||||||
|
}else{
|
||||||
|
tableDataSource.value = endlist
|
||||||
|
change({
|
||||||
|
limit: props.page.limit,
|
||||||
|
current: pagecurrent || props.page.current
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log("筛选",endlist)
|
||||||
|
},{
|
||||||
|
deep: true
|
||||||
|
})
|
||||||
|
window.addEventListener("click", heddin)
|
||||||
|
// 将分页移入到组件内
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -709,50 +811,27 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
||||||
<!-- 筛选 -->
|
<!-- 筛选 -->
|
||||||
<lay-dropdown
|
<lay-dropdown v-if="showToolbar('filter')" updateAtScroll :style="toolbarStyle('filter')">
|
||||||
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
|
<lay-checkbox v-for="column in tableHeadColumns[0]" v-model="tableColumnKeys" skin="primary"
|
||||||
v-for="column in tableHeadColumns[0]"
|
:disabled="column.children" :key="column.key" :value="column.key">{{ column.title }}</lay-checkbox>
|
||||||
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
|
<div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')"
|
||||||
v-if="showToolbar('export')"
|
@click="exportData()">
|
||||||
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
|
<div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event
|
||||||
v-if="showToolbar('print')"
|
@click="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>
|
||||||
@ -764,47 +843,26 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<div class="layui-table-box">
|
<div class="layui-table-box">
|
||||||
<!-- 表头 -->
|
<!-- 表头 -->
|
||||||
<div
|
<div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
|
||||||
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
|
<table class="layui-table" :lay-size="size" :lay-skin="skin" ref="tableHeaderTable">
|
||||||
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
|
<col :width="column.width" :style="{
|
||||||
:width="column.width"
|
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||||
:style="{
|
}" />
|
||||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<template
|
<template v-for="(
|
||||||
v-for="(
|
tableHeadColumn, tableHeadColumnIndex
|
||||||
tableHeadColumn, tableHeadColumnIndex
|
) in tableHeadColumns" :key="tableHeadColumnIndex">
|
||||||
) in tableHeadColumns"
|
|
||||||
:key="tableHeadColumnIndex"
|
|
||||||
>
|
|
||||||
<tr>
|
<tr>
|
||||||
<template
|
<template v-for="(column, columnIndex) in tableHeadColumn" :key="column">
|
||||||
v-for="(column, columnIndex) in tableHeadColumn"
|
<th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan"
|
||||||
:key="column"
|
class="layui-table-cell" :class="[
|
||||||
>
|
|
||||||
<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}`
|
||||||
@ -818,8 +876,7 @@ onBeforeUnmount(() => {
|
|||||||
column.type == 'number'
|
column.type == 'number'
|
||||||
? 'layui-table-cell-number'
|
? 'layui-table-cell-number'
|
||||||
: '',
|
: '',
|
||||||
]"
|
]" :style="[
|
||||||
:style="[
|
|
||||||
{
|
{
|
||||||
textAlign: column.align,
|
textAlign: column.align,
|
||||||
},
|
},
|
||||||
@ -828,16 +885,10 @@ onBeforeUnmount(() => {
|
|||||||
columnIndex,
|
columnIndex,
|
||||||
tableHeadColumn
|
tableHeadColumn
|
||||||
),
|
),
|
||||||
]"
|
]">
|
||||||
>
|
|
||||||
<template v-if="column.type == 'checkbox'">
|
<template v-if="column.type == 'checkbox'">
|
||||||
<lay-checkbox
|
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
|
||||||
v-model="hasChecked"
|
@change="changeAll" />
|
||||||
:is-indeterminate="!allChecked"
|
|
||||||
skin="primary"
|
|
||||||
value="all"
|
|
||||||
@change="changeAll"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span>
|
<span>
|
||||||
@ -849,23 +900,20 @@ onBeforeUnmount(() => {
|
|||||||
</template>
|
</template>
|
||||||
</span>
|
</span>
|
||||||
<!-- 插槽 -->
|
<!-- 插槽 -->
|
||||||
<span
|
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
|
||||||
v-if="column.sort"
|
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
|
||||||
class="layui-table-sort layui-inline"
|
title="升序"></i>
|
||||||
lay-sort
|
<i @click.stop="
|
||||||
>
|
sortTable($event, column.key, 'desc')
|
||||||
<i
|
" class="layui-edge layui-table-sort-desc" title="降序"></i>
|
||||||
@click.stop="sortTable($event, column.key, 'asc')"
|
</span>
|
||||||
class="layui-edge layui-table-sort-asc"
|
<span v-if="column.soul" class="layui-table-sort layui-inline soul-icon">
|
||||||
title="升序"
|
<i class="soul-icon soul-box" :class="column.soulclass || 'soul-icon-filter'"
|
||||||
></i>
|
@click.stop="showsoul($event, column, column.key)">
|
||||||
<i
|
<!-- <div v-show="column.soulshow" @click.stop="" class="soulbox">
|
||||||
@click.stop="
|
11111
|
||||||
sortTable($event, column.key, 'desc')
|
</div> -->
|
||||||
"
|
</i>
|
||||||
class="layui-edge layui-table-sort-desc"
|
|
||||||
title="降序"
|
|
||||||
></i>
|
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</th>
|
</th>
|
||||||
@ -877,64 +925,29 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表身 -->
|
<!-- 表身 -->
|
||||||
<div
|
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }" ref="tableBody">
|
||||||
class="layui-table-body layui-table-main"
|
<table class="layui-table" v-if="datalist.length > 0 && loading == false"
|
||||||
:style="{ height: height, maxHeight: maxHeight }"
|
:class="{ 'layui-table-even': props.even }" :lay-size="size" :lay-skin="skin">
|
||||||
ref="tableBody"
|
|
||||||
>
|
|
||||||
<table
|
|
||||||
class="layui-table"
|
|
||||||
v-if="tableDataSource.length > 0 && loading == false"
|
|
||||||
:class="{ 'layui-table-even': props.even }"
|
|
||||||
:lay-size="size"
|
|
||||||
:lay-skin="skin"
|
|
||||||
>
|
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<template
|
<template v-for="(column, columnIndex) in tableBodyColumns" :key="columnIndex">
|
||||||
v-for="(column, columnIndex) in tableBodyColumns"
|
|
||||||
:key="columnIndex"
|
|
||||||
>
|
|
||||||
<template v-if="tableColumnKeys.includes(column.key)">
|
<template v-if="tableColumnKeys.includes(column.key)">
|
||||||
<col
|
<col :width="column.width" :style="{
|
||||||
:width="column.width"
|
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||||
:style="{
|
}" />
|
||||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<tbody>
|
<tbody>
|
||||||
<!-- 渲染 -->
|
<!-- 渲染 -->
|
||||||
<template
|
<template v-for="(children, index) in datalist" :key="index">
|
||||||
v-for="(children, index) in tableDataSource"
|
<table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize"
|
||||||
:key="index"
|
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
|
||||||
>
|
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
|
||||||
<table-row
|
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
|
||||||
:id="id"
|
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" :getCheckboxProps="getCheckboxProps"
|
||||||
:index="index"
|
:getRadioProps="getRadioProps" v-model:expandKeys="tableExpandKeys"
|
||||||
:data="children"
|
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey" @row="rowClick"
|
||||||
:columns="tableBodyColumns"
|
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu">
|
||||||
: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 }">
|
<template v-for="name in slotsData" #[name]="{ data }">
|
||||||
<slot :name="name" :data="data"></slot>
|
<slot :name="name" :data="data"></slot>
|
||||||
</template>
|
</template>
|
||||||
@ -944,42 +957,33 @@ onBeforeUnmount(() => {
|
|||||||
</table-row>
|
</table-row>
|
||||||
</template>
|
</template>
|
||||||
<tr v-if="hasTotalRow" class="layui-table-total">
|
<tr v-if="hasTotalRow" class="layui-table-total">
|
||||||
<template
|
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||||
v-for="(column, columnIndex) in columns"
|
|
||||||
:key="columnIndex"
|
|
||||||
>
|
|
||||||
<template v-if="tableColumnKeys.includes(column.key)">
|
<template v-if="tableColumnKeys.includes(column.key)">
|
||||||
<td
|
<td :style="[
|
||||||
:style="[
|
{
|
||||||
{
|
textAlign: column.align,
|
||||||
textAlign: column.align,
|
whiteSpace: column.ellipsisTooltip
|
||||||
whiteSpace: column.ellipsisTooltip
|
? 'nowrap'
|
||||||
? 'nowrap'
|
: 'normal',
|
||||||
: 'normal',
|
},
|
||||||
},
|
renderFixedStyle(column, columnIndex),
|
||||||
renderFixedStyle(column, columnIndex),
|
]" :class="[
|
||||||
]"
|
'layui-table-cell',
|
||||||
:class="[
|
renderFixedClassName(column, columnIndex),
|
||||||
'layui-table-cell',
|
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||||
renderFixedClassName(column, columnIndex),
|
]" v-html="renderTotalRowCell(column)"></td>
|
||||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
|
||||||
]"
|
|
||||||
v-html="renderTotalRowCell(column)"
|
|
||||||
></td>
|
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<template v-if="tableDataSource.length == 0 && loading == false">
|
<template v-if="datalist.length == 0 && loading == false">
|
||||||
<lay-empty></lay-empty>
|
<lay-empty></lay-empty>
|
||||||
<div :style="{ width: tableBodyEmptyWidth }"></div>
|
<div :style="{ width: tableBodyEmptyWidth }"></div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="loading == true">
|
<template v-if="loading == true">
|
||||||
<div class="layui-table-loading">
|
<div class="layui-table-loading">
|
||||||
<i
|
<i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
|
||||||
class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -988,23 +992,22 @@ onBeforeUnmount(() => {
|
|||||||
</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
|
<table-page :total="page.total" :pages="page.pages" :theme="page.theme" :limits="page.limits"
|
||||||
:total="page.total"
|
:showSkip="page.showSkip" :show-page="page.showPage" :showRefresh="page.showRefresh" :showLimit="page.showLimit"
|
||||||
:pages="page.pages"
|
:showCount="page.showCount" :count="page.count" v-model:current="page.current" v-model:limit="page.limit"
|
||||||
:theme="page.theme"
|
@change="change">
|
||||||
: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="(
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
14
src/component/table/soultable.less
Normal file
14
src/component/table/soultable.less
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.soulbox{
|
||||||
|
position: absolute;
|
||||||
|
background-color: #333333;
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2147483647;
|
||||||
|
min-width: 160px;
|
||||||
|
max-width: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
|
||||||
|
}
|
120
src/component/table/soultable.vue
Normal file
120
src/component/table/soultable.vue
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<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 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-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: 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">
|
||||||
|
<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,
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<SoulTableProps>(), {
|
||||||
|
top: 10,
|
||||||
|
left: 10,
|
||||||
|
list: [],
|
||||||
|
soulkey: ""
|
||||||
|
})
|
||||||
|
const emit = defineEmits(["asc", "desc","sx"])
|
||||||
|
function asc(event: any) {
|
||||||
|
emit("asc", event)
|
||||||
|
}
|
||||||
|
function desc(event: any) {
|
||||||
|
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 })
|
||||||
|
// 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)
|
||||||
|
|
||||||
|
</script>
|
795
src/css/soultable.less
Normal file
795
src/css/soultable.less
Normal file
@ -0,0 +1,795 @@
|
|||||||
|
/** 自定义字体 **/
|
||||||
|
/** 这里使用在线字体,如果需要离线包,请看 font/README.md **/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'soul-icon'; /* project id 677836 */
|
||||||
|
src: url('//at.alicdn.com/t/font_677836_jwq362m0tt.eot');
|
||||||
|
src: url('//at.alicdn.com/t/font_677836_jwq362m0tt.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('//at.alicdn.com/t/font_677836_jwq362m0tt.woff2') format('woff2'),
|
||||||
|
url('//at.alicdn.com/t/font_677836_jwq362m0tt.woff') format('woff'),
|
||||||
|
url('//at.alicdn.com/t/font_677836_jwq362m0tt.ttf') format('truetype'),
|
||||||
|
url('//at.alicdn.com/t/font_677836_jwq362m0tt.svg#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-icon {
|
||||||
|
font-family:"soul-icon" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-icon-filter:before { content: "\e60b"; }
|
||||||
|
.soul-icon-filter-asc:before { content: "\e768"; }
|
||||||
|
.soul-icon-filter-desc:before { content: "\e767"; }
|
||||||
|
.soul-icon-asc:before { content: "\e6af"; }
|
||||||
|
.soul-icon-desc:before { content: "\e6ae"; }
|
||||||
|
.soul-icon-all-check:before { content: "\e670"; }
|
||||||
|
.soul-icon-invert-check:before { content: "\e614"; }
|
||||||
|
.soul-icon-fold:before { content: "\e760"; }
|
||||||
|
.soul-icon-unfold:before { content: "\e611"; }
|
||||||
|
.soul-icon-delete:before { content: "\e600"; }
|
||||||
|
.soul-icon-download:before { content: "\e601"; }
|
||||||
|
.soul-icon-drop-list:before { content: "\e6a3"; }
|
||||||
|
.soul-icon-query:before { content: "\e66d"; }
|
||||||
|
/* 全选*/
|
||||||
|
.soul-icon-quanxuan:before { content: "\e623"; }
|
||||||
|
.soul-icon-qingkong:before { content: "\e63e"; }
|
||||||
|
.soul-icon-autoColumnWidth
|
||||||
|
:before { content: "\e614"; }
|
||||||
|
|
||||||
|
/*最大化*/
|
||||||
|
.soul-icon-min:before { content: "\e656"; }
|
||||||
|
.soul-icon-max:before { content: "\e61b"; }
|
||||||
|
|
||||||
|
|
||||||
|
/* 配色方案*/
|
||||||
|
.layui-red {
|
||||||
|
color: #FF5722
|
||||||
|
}
|
||||||
|
.layui-orange {
|
||||||
|
color: #FFB800
|
||||||
|
}
|
||||||
|
.layui-green {
|
||||||
|
color: #009688
|
||||||
|
}
|
||||||
|
.layui-cyan {
|
||||||
|
color: #2F4056
|
||||||
|
}
|
||||||
|
.layui-blue {
|
||||||
|
color: #1E9FFF
|
||||||
|
}
|
||||||
|
.layui-black {
|
||||||
|
color: #393D49
|
||||||
|
}
|
||||||
|
.layui-gray {
|
||||||
|
color: #eee
|
||||||
|
}
|
||||||
|
.layui-firebrick {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
.layui-deeppink {
|
||||||
|
color: deeppink;
|
||||||
|
}
|
||||||
|
.layui-blueviolet {
|
||||||
|
color: blueviolet;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-condition [class*="layui-col-"] {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
/* 表格排序样式*/
|
||||||
|
.soul-edge {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-width: 6px;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: transparent;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
.soul-table-sort {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 5px;
|
||||||
|
cursor: pointer !important;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort .soul-edge {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
border-width: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort .soul-table-sort-asc {
|
||||||
|
top: 10px;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #b2b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort .soul-table-sort-asc:hover {
|
||||||
|
border-bottom-color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort .soul-table-sort-desc {
|
||||||
|
bottom: -2px;
|
||||||
|
border-bottom: none;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-color: #b2b2b2
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort .soul-table-sort-desc:hover {
|
||||||
|
border-top-color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort[soul-sort=asc] .soul-table-sort-asc {
|
||||||
|
border-bottom-color: #000
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-sort[soul-sort=desc] .soul-table-sort-desc {
|
||||||
|
border-top-color: #000
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiOption {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
/*表格筛选*/
|
||||||
|
.soul-table-filter {
|
||||||
|
line-height: 20px;
|
||||||
|
color: #b2b2b2;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.soul-table-filter .soul-icon-filter-asc,.soul-table-filter .soul-icon-filter-desc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.soul-table-filter[lay-sort="asc"] .soul-icon-filter-asc{
|
||||||
|
display: block;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.soul-table-filter[lay-sort="asc"] .soul-icon-filter,.soul-table-filter[lay-sort="asc"] .soul-icon-filter-desc{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-filter[lay-sort="desc"] .soul-icon-filter-desc{
|
||||||
|
display: block;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.soul-table-filter[lay-sort="desc"] .soul-icon-filter,.soul-table-filter[lay-sort="desc"] .soul-icon-filter-asc{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.soul-table-filter[soul-filter="true"] i {
|
||||||
|
color: #009688!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.soulbox,[id^=main-list], [id^=soul-columns], [id^=soul-dropList], [id^=soul-condition], [id^=soul-bf-prefix], [id^=soul-bf-column], [id^=soul-bf-type], [id^=soul-bf-cond2] {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2147483647;
|
||||||
|
background-color: white;
|
||||||
|
max-height: 200px;
|
||||||
|
min-width: 160px;
|
||||||
|
max-width: 300px;
|
||||||
|
overflow-y: visible !important;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
.soulbox{
|
||||||
|
max-height: initial;
|
||||||
|
min-width: initial;
|
||||||
|
}
|
||||||
|
[id^=main-list] {
|
||||||
|
max-height: initial;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] {
|
||||||
|
overflow-y: visible;
|
||||||
|
max-height: initial;
|
||||||
|
min-width: 285px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-laydate-header {
|
||||||
|
padding: 4px 70px 5px
|
||||||
|
}
|
||||||
|
[id^=soul-condition] hr{
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
[id^=soul-condition].soul-bf{
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
.soulbox ul li {
|
||||||
|
padding: 3px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.soulbox ul li:hover {
|
||||||
|
background-color: deepskyblue;
|
||||||
|
}
|
||||||
|
.soulbox i.layui-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
[id^=soul-dropList] ul {
|
||||||
|
border: 0;
|
||||||
|
max-height: 116px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
[id^=soul-dropList] ul li, .soulbox [id^=soul-columns]>li{
|
||||||
|
padding: 2px 10px;
|
||||||
|
}
|
||||||
|
[id^=soul-dropList] .check {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.filter-search {
|
||||||
|
padding: 5px 10px 0 10px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-inline {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] table.condition-table tr>td {
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] table.condition-table tr>td:first-child {
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-form-switch {
|
||||||
|
background-color: #1E9FFF;
|
||||||
|
border: 1px solid #1E9FFF;
|
||||||
|
width: 35px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-form-switch.layui-form-onswitch {
|
||||||
|
background-color: #5FB878;
|
||||||
|
border: 1px solid #5FB878;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-form-switch em {
|
||||||
|
color: #fff!important;
|
||||||
|
}
|
||||||
|
[id^=soul-condition] .layui-form-switch i {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
[data-type^=date][class$=Condition] {
|
||||||
|
width: 273px;
|
||||||
|
}
|
||||||
|
/*表格筛选*/
|
||||||
|
[id^=soul-condition]>div{
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-condition-title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*底部筛选*/
|
||||||
|
.soul-bottom-contion {
|
||||||
|
height: 31px;
|
||||||
|
/*line-height: 29px;*/
|
||||||
|
border-top: solid 1px #e6e6e6;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100vw - 100px);
|
||||||
|
height: 30px;
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-item>div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items .condition-item>div[class^='item-']:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items .condition-item{
|
||||||
|
padding: 0 10px;
|
||||||
|
margin: 0 2px;
|
||||||
|
font-weight: bold;
|
||||||
|
border: solid 1px darkslateblue;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 28px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .editCondtion {
|
||||||
|
height: 30px;
|
||||||
|
float: right;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .item-value {
|
||||||
|
min-width: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .editCondtion a {
|
||||||
|
border: hidden;
|
||||||
|
border-left: solid 1px #e6e6e6;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 29px;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items .condition-item .condition-item-close {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items>.condition-item>.condition-item-close {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items .condition-item .condition-item-close:hover{
|
||||||
|
color: red
|
||||||
|
}
|
||||||
|
.soul-bottom-contion .condition-items .condition-item .condition-item-close:before {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.soul-edit-out {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
[id^=soul-bf] li {
|
||||||
|
padding: 0px 10px;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
[id^=soul-bf] li.soul-bf-selected {
|
||||||
|
background-color: deepskyblue;
|
||||||
|
}
|
||||||
|
[id^=soul-bf] li:hover {
|
||||||
|
background-color: deepskyblue;
|
||||||
|
}
|
||||||
|
.soul-edit-out .tempValue {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.soul-bf-condition-value {
|
||||||
|
display: inline;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
/*子表格*/
|
||||||
|
.layui-table tbody tr.noHover:hover {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*编辑筛选*/
|
||||||
|
.soul-edit-out .layui-form-radio {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.soul-edit-out ul li > div {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
height: 25px;
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.soul-edit-out ul.group {
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
.soul-edit-out ul.group.line {
|
||||||
|
border-left: 1px dashed grey;
|
||||||
|
}
|
||||||
|
.soul-edit-out ul li {
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.soul-edit-out table {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.soul-edit-out table td[data-type='top'] {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-left: dashed 1px grey;
|
||||||
|
border-bottom: dashed 1px grey;
|
||||||
|
}
|
||||||
|
.soul-edit-out table td[data-type='bottom'] {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-left: dashed 1px grey;
|
||||||
|
}
|
||||||
|
.soul-edit-out li.last>div>table td[data-type='bottom'] {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
.soul-edit-out .layui-form-switch {
|
||||||
|
background-color: #1E9FFF;
|
||||||
|
border: 1px solid #1E9FFF;
|
||||||
|
width: 35px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.soul-edit-out .layui-form-switch em {
|
||||||
|
color: #fff!important;
|
||||||
|
}
|
||||||
|
.soul-edit-out .layui-form-switch i {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.soul-edit-out .layui-form-switch.layui-form-onswitch {
|
||||||
|
background-color: #5FB878;
|
||||||
|
border: 1px solid #5FB878;
|
||||||
|
}
|
||||||
|
.soul-edit-out .delete-item {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.soul-edit-out li:hover>.delete-item {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 拖拽相关 */
|
||||||
|
#column-remove {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2147483647;
|
||||||
|
}
|
||||||
|
.layui-table-box.no-left-border td.isDrag, .layui-table-box.no-left-border th.isDrag {
|
||||||
|
border-left: inherit!important;
|
||||||
|
}
|
||||||
|
.soul-drag-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
z-index: 200;
|
||||||
|
left: 50%;
|
||||||
|
font-weight: 900;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 1px 20px rgba(0,0,0,.15);
|
||||||
|
text-align: center;
|
||||||
|
transform: translateX(100vw);
|
||||||
|
/*transition: transform .3s;*/
|
||||||
|
}
|
||||||
|
.soul-drag-bar.active {
|
||||||
|
transform: translateX(-98px);
|
||||||
|
}
|
||||||
|
.soul-drag-bar > div {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: crosshair;
|
||||||
|
width: 62px;
|
||||||
|
background-color: rgba(0, 150, 136, 0.5);
|
||||||
|
}
|
||||||
|
.soul-drag-bar > div.active, .soul-drag-bar[data-type='left']>div[data-type='left'], .soul-drag-bar[data-type='right']>div[data-type='right'], .soul-drag-bar[data-type='none']>div[data-type='none'] {
|
||||||
|
background-color: rgb(0, 150, 136);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画 */
|
||||||
|
.animated {
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
-moz-animation-duration: 1s;
|
||||||
|
-o-animation-duration: 1s;
|
||||||
|
animation-duration: 1s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
-moz-animation-fill-mode: both;
|
||||||
|
-o-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
@-moz-keyframes fadeInLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeInLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-o-transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-o-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.fadeInLeft {
|
||||||
|
-webkit-animation-name: fadeInLeft;
|
||||||
|
-moz-animation-name: fadeInLeft;
|
||||||
|
-o-animation-name: fadeInLeft;
|
||||||
|
animation-name: fadeInLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeOutLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeOutLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeOutLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-o-transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-o-transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOutLeft {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.fadeOutLeft {
|
||||||
|
-webkit-animation-name: fadeOutLeft;
|
||||||
|
-moz-animation-name: fadeOutLeft;
|
||||||
|
-o-animation-name: fadeOutLeft;
|
||||||
|
animation-name: fadeOutLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeInRight {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateX(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeInRight {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transform: translateX(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeInRight {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-o-transform: translateX(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-o-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInRight {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.fadeInRight {
|
||||||
|
-webkit-animation-name: fadeInRight;
|
||||||
|
-moz-animation-name: fadeInRight;
|
||||||
|
-o-animation-name: fadeInRight;
|
||||||
|
animation-name: fadeInRight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-moz-transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-o-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-o-transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.fadeInUp {
|
||||||
|
-webkit-animation-name: fadeInUp;
|
||||||
|
-moz-animation-name: fadeInUp;
|
||||||
|
-o-animation-name: fadeInUp;
|
||||||
|
animation-name: fadeInUp;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeOutDown {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeOutDown {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-moz-transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeOutDown {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
-o-transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-o-transform: translateY(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOutDown {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.fadeOutDown {
|
||||||
|
-webkit-animation-name: fadeOutDown;
|
||||||
|
-moz-animation-name: fadeOutDown;
|
||||||
|
-o-animation-name: fadeOutDown;
|
||||||
|
animation-name: fadeOutDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
#soul-table-contextmenu-wrapper {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.soul-table-contextmenu {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2147483647;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.soul-table-contextmenu li {
|
||||||
|
line-height: 26px;
|
||||||
|
padding: 0 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
.soul-table-contextmenu li:hover {
|
||||||
|
background: #c5c5c5;
|
||||||
|
}
|
||||||
|
.soul-table-contextmenu li i.prefixIcon{
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.soul-table-contextmenu li i.endIcon{
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*拖拽相关*/
|
||||||
|
.layui-table-sort-invalid {
|
||||||
|
width: 10px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 5px;
|
||||||
|
cursor: pointer!important;
|
||||||
|
}
|
||||||
|
.layui-table-sort-invalid .layui-table-sort-asc {
|
||||||
|
top: 3px;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #b2b2b2;
|
||||||
|
}
|
||||||
|
.layui-table-sort-invalid .layui-edge {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
border-width: 5px;
|
||||||
|
}
|
||||||
|
.layui-table-sort-invalid .layui-table-sort-desc {
|
||||||
|
bottom: 5px;
|
||||||
|
border-bottom: none;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-color: #b2b2b2;
|
||||||
|
}
|
||||||
|
.layui-table-sort-invalid .layui-edge {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
border-width: 5px;
|
||||||
|
}
|
||||||
|
.noselect {
|
||||||
|
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
|
||||||
|
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||||
|
|
||||||
|
-khtml-user-select: none; /* Konqueror */
|
||||||
|
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
|
||||||
|
user-select: none; /* Non-prefixed version, currently */
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 固定列滚动 */
|
||||||
|
.soul-fixed-scroll::-webkit-scrollbar{
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
.soul-fixed-scroll{
|
||||||
|
overflow-y: auto!important;
|
||||||
|
-ms-overflow-style:none;
|
||||||
|
overflow:-moz-scrollbars-none;
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
203
umd/index.js
203
umd/index.js
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user