feat: table column 新增 sort 字段
This commit is contained in:
parent
60b2ec48fa
commit
39c0488ddb
@ -243,7 +243,8 @@ export default {
|
|||||||
},{
|
},{
|
||||||
title:"年龄",
|
title:"年龄",
|
||||||
width: "180px",
|
width: "180px",
|
||||||
key:"age"
|
key:"age",
|
||||||
|
sort: true
|
||||||
},{
|
},{
|
||||||
title:"操作",
|
title:"操作",
|
||||||
width: "180px",
|
width: "180px",
|
||||||
|
@ -14,6 +14,7 @@ import LayDropdown from "../dropdown";
|
|||||||
import LayPage from "../page";
|
import LayPage from "../page";
|
||||||
import LayIcon from "../icon";
|
import LayIcon from "../icon";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
import { AnyARecord } from "dns";
|
||||||
|
|
||||||
const tableId = guid();
|
const tableId = guid();
|
||||||
|
|
||||||
@ -47,6 +48,7 @@ const slot = useSlots();
|
|||||||
const slots = slot.default && slot.default();
|
const slots = slot.default && slot.default();
|
||||||
|
|
||||||
const allChecked = ref(false);
|
const allChecked = ref(false);
|
||||||
|
const tableDataSource = ref([...props.dataSource]);
|
||||||
const tableSelectedKeys = ref([...props.selectedKeys]);
|
const tableSelectedKeys = ref([...props.selectedKeys]);
|
||||||
const tableColumns = ref([...props.columns]);
|
const tableColumns = ref([...props.columns]);
|
||||||
const tableColumnKeys = ref(
|
const tableColumnKeys = ref(
|
||||||
@ -55,6 +57,13 @@ const tableColumnKeys = ref(
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.dataSource,
|
||||||
|
() => {
|
||||||
|
tableDataSource.value = [...props.dataSource];
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const changeAll = function (checked: any) {
|
const changeAll = function (checked: any) {
|
||||||
const ids = props.dataSource.map((item: any) => {
|
const ids = props.dataSource.map((item: any) => {
|
||||||
return item[props.id];
|
return item[props.id];
|
||||||
@ -127,6 +136,41 @@ const exportData = () => {
|
|||||||
return;
|
return;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const sortTable = (e: any, key: string, sort: string) => {
|
||||||
|
// 当前排序
|
||||||
|
let currentSort = e.target.parentNode.getAttribute("lay-sort");
|
||||||
|
// 点击排序
|
||||||
|
if (sort === "desc") {
|
||||||
|
if (currentSort === sort) {
|
||||||
|
// 取消排序
|
||||||
|
e.target.parentNode.setAttribute("lay-sort", "");
|
||||||
|
tableDataSource.value = [...props.dataSource];
|
||||||
|
} else {
|
||||||
|
// 进行 desc 排序
|
||||||
|
e.target.parentNode.setAttribute("lay-sort", "desc");
|
||||||
|
tableDataSource.value.sort((x, y) => {
|
||||||
|
if (x[key] < y[key]) return 1;
|
||||||
|
else if (x[key] > y[key]) return -1;
|
||||||
|
else return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (currentSort === sort) {
|
||||||
|
// 取消排序
|
||||||
|
e.target.parentNode.setAttribute("lay-sort", "");
|
||||||
|
tableDataSource.value = [...props.dataSource];
|
||||||
|
} else {
|
||||||
|
// 进行 asc 排序
|
||||||
|
e.target.parentNode.setAttribute("lay-sort", "asc");
|
||||||
|
tableDataSource.value.sort((x, y) => {
|
||||||
|
if (x[key] < y[key]) return -1;
|
||||||
|
else if (x[key] > y[key]) return 1;
|
||||||
|
else return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
let tableHeader = ref<HTMLElement | null>(null);
|
let tableHeader = ref<HTMLElement | null>(null);
|
||||||
let tableBody = ref<HTMLElement | null>(null);
|
let tableBody = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
@ -210,13 +254,15 @@ onMounted(() => {
|
|||||||
<span
|
<span
|
||||||
v-if="column.sort"
|
v-if="column.sort"
|
||||||
class="layui-table-sort layui-inline"
|
class="layui-table-sort layui-inline"
|
||||||
lay-sort=""
|
lay-sort="desc"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
|
@click.stop="sortTable($event, column.key, 'asc')"
|
||||||
class="layui-edge layui-table-sort-asc"
|
class="layui-edge layui-table-sort-asc"
|
||||||
title="升序"
|
title="升序"
|
||||||
></i>
|
></i>
|
||||||
<i
|
<i
|
||||||
|
@click.stop="sortTable($event, column.key, 'desc')"
|
||||||
class="layui-edge layui-table-sort-desc"
|
class="layui-edge layui-table-sort-desc"
|
||||||
title="降序"
|
title="降序"
|
||||||
></i>
|
></i>
|
||||||
@ -232,11 +278,12 @@ onMounted(() => {
|
|||||||
<div class="layui-table-body layui-table-main" ref="tableBody">
|
<div class="layui-table-body layui-table-main" ref="tableBody">
|
||||||
<table class="layui-table" :lay-size="size">
|
<table class="layui-table" :lay-size="size">
|
||||||
<tbody>
|
<tbody>
|
||||||
<template v-for="data in dataSource" :key="data">
|
<template v-for="data in tableDataSource" :key="data">
|
||||||
<tr
|
<tr
|
||||||
@click.stop="rowClick(data)"
|
@click.stop="rowClick(data)"
|
||||||
@dblclick.stop="rowDoubleClick(data)"
|
@dblclick.stop="rowDoubleClick(data)"
|
||||||
>
|
>
|
||||||
|
<!-- 复选框 -->
|
||||||
<td v-if="checkbox" class="layui-table-col-special">
|
<td v-if="checkbox" class="layui-table-col-special">
|
||||||
<div class="layui-table-cell laytable-cell-checkbox">
|
<div class="layui-table-cell laytable-cell-checkbox">
|
||||||
<LayCheckbox
|
<LayCheckbox
|
||||||
@ -247,6 +294,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<!-- 数据列 -->
|
||||||
<template v-for="column in columns" :key="column">
|
<template v-for="column in columns" :key="column">
|
||||||
<template v-if="tableColumnKeys.includes(column.key)">
|
<template v-if="tableColumnKeys.includes(column.key)">
|
||||||
<!-- 插 槽 Column -->
|
<!-- 插 槽 Column -->
|
||||||
|
Loading…
x
Reference in New Issue
Block a user