Merge branch 'next' into doc-demand

package/component/src/component/scroll/index.less

@@ -1,44 +1,34 @@
-.scrollbar-box {
+.layui-scroll {
   height: 100%;
   overflow: hidden !important;
 }
 
-.scrollbar-y {
+.layui-scroll-y {
   position: relative;
   height: 100%;
-  .scroll-wrap {
+
+  .layui-scroll-wrap {
     height: 100%;
     overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
+    scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .scrollbar-track {
+  .layui-scroll-track {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     border-radius: 8px;
     z-index: 20;
-    .scrollbar-thumb {
+    .layui-scroll-thumb {
       margin: 0 auto;
       border-radius: 6px;
       cursor: default;
     }
   }
 }
-.scrollbar-y ::-webkit-scrollbar {
+
+.layui-scroll-y ::-webkit-scrollbar {
   display: none;
-}
-//移动端隐藏自定义滚动条
-.hide.scrollbar-box .scrollbar-track {
-  display: none;
-}
-//移动端显示原生滑块
-.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar {
-  display: block;
-}
-.hide.scrollbar-box .scrollbar-y .scroll-wrap {
-  scrollbar-width: auto;
-  -ms-overflow-style: scrollbar;
-}
+}

package/component/src/component/scroll/index.vue

@@ -1,32 +1,28 @@
 <template>
   <div
-    class="scrollbar-box"
-    :class="{ hide: winWidth < 500 }"
+    class="layui-scroll"
+    :class="{ hide: data.winWidth < 500 }"
     :style="{ height: height }"
   >
-    <div class="scrollbar-y">
-      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
+    <div class="layui-scroll-y">
+      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
         <slot></slot>
       </div>
       <div
         ref="barRef"
-        class="scrollbar-track"
+        class="layui-scroll-track"
         :style="{
-          backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
+          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
         }"
       >
-        <!--
-        没有滑块方式，背景色透明：使用v-show窗口变大，滑块不出现，所以使用背景色控制
-        backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
-       -->
         <div
           :style="{
-            height: barHeight + 'px',
-            width: scrollWidth + 'px',
-            transform: 'translateY(' + translateY + 'px)',
-            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
+            height: data.barHeight + 'px',
+            width: thumbWidth + 'px',
+            transform: 'translateY(' + data.translateY + 'px)',
+            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
           }"
-          class="scrollbar-thumb"
+          class="layui-scroll-thumb"
           @mousedown.stop.prevent="moveStart"
         ></div>
       </div>
@@ -34,202 +30,199 @@
   </div>
 </template>
 
-<script>
-import "./index.less";
-import {
-  defineComponent,
-  toRefs,
-  onMounted,
-  nextTick,
-  reactive,
-  onUnmounted,
-} from "vue";
-export default defineComponent({
+<script lang="ts">
+export default {
   name: "LayScroll",
-  props: {
-    height: {
-      type: String,
-      default: "100%",
-    },
-    slotColor: {
-      //滑块槽颜色 :slotColor="'red'"
-      type: String,
-      default: "rgba(0,0,0,0)",
-    },
-    scrollColor: {
-      //滑块颜色  :scrollColor="'red'"
-      type: String,
-      default: "#eeeeee",
-    },
-    scrollWidth: {
-      //滑块宽度 :scrollWidth="7"
-      type: Number,
-      default: 6,
-    },
-  },
-  setup(props, ctx) {
-    const data = reactive({
-      scrollRef: null, // 内容盒子
-      barRef: null, // 滚动条轨道
-      translateY: 0, // 滚动块平移的距离
-      heightPre: 0, // 可视高度和内容高度比
-      barHeight: 0, // 滑块高度
-      winWidth: document.body.clientWidth, //初始化浏览器页面宽度
-    });
-    let time = null; // 定时器
-    let isMove = false; // 判断鼠标是否点击滑块（为松开）
-    let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
-    let trackHeight = 0; // 滚动条轨道高度
-    let wrapHeight = 0; // 容器高度（可视高度）
-    let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
-
-    // 页面挂载后计算滚动条
-    onMounted(() => {
-      monitorWindow(); //监听窗口尺寸
-      monitorScrollBar(); //监听内容元素尺寸
-      nextTick(() => {
-        //dom渲染后
-        calculationLength(); //初始化延迟更新滚动条
-      });
-    });
-    // 页面卸载清除定时器
-    onUnmounted(() => {
-      window.clearInterval(time);
-      time = null;
-    });
-    // 监听页面尺寸改变计算滚动条
-    const monitorWindow = function () {
-      let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
-      window.addEventListener("resize", () => {
-        data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
-        clearTimeout(time);
-        time = setTimeout(() => {
-          //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
-          // console.log("浏览器窗口变化更新滚动条");
-          initScrollListner();
-        }, 500);
-      });
-    };
-
-    //监听内容元素尺寸变化
-    const monitorScrollBar = function () {
-      var monitorUl = data.scrollRef.children[0];
-      // var monitorDiv= document;    // 监听document
-      let MutationObserver =
-        window.MutationObserver ||
-        window.WebKitMutationObserver ||
-        window.MozMutationObserver;
-      let observer = new MutationObserver(function (mutations) {
-        // console.log("内容元素变化更新滚动条");
-        initScrollListner();
-      });
-
-      // childList  观察子节点变动
-      // 监听子节点增加或者内容撑起的尺寸
-      observer.observe(monitorUl, {
-        attributes: true,
-        childList: true,
-      });
-    };
-
-    // 初始化延迟监听滚动条
-    const calculationLength = function () {
-      // 直接执行initScrollListner函数，获取滚动条长度部准确
-      // 因为页面渲染有延迟，获取dom元素需要延迟
-      // 每间隔10毫秒更新滑块长度
-      time = setInterval(() => {
-        // 计算滚动条长度
-        initScrollListner();
-      }, 50);
-      // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
-      setTimeout(() => {
-        window.clearInterval(time);
-        time = null;
-      }, 2000);
-    };
-    // 计算滚动条高度
-    const initScrollListner = function () {
-      let scroll = data.scrollRef;
-      let bar = data.barRef;
-      // scroll有时候拿不到元素，要判断一下
-      if (scroll) {
-        wrapContentHeight = scroll.scrollHeight;
-        wrapHeight = scroll.clientHeight;
-        trackHeight = bar.clientHeight;
-        // console.log(wrapContentHeight ,wrapHeight);
-        // 容器高度 / 内容高度   100 150
-        data.heightPre = wrapHeight / wrapContentHeight;
-        // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
-        data.barHeight = data.heightPre * trackHeight;
-      }
-    };
-    // 内容滚动时，计算滑块移动的距离
-    const onMosewheel = function (e) {
-      // scrollTop页面顶部滚出的高度
-      // offsetHeight页面可视区域高度
-      // scrollHeight页面正文全文高度
-      // data.translateY滚动块平移的距离
-      data.translateY = e.target.scrollTop * data.heightPre;
-      if (data.translateY == 0) {
-        // 到达顶部
-        arrive("top");
-      } else if (
-        e.target.scrollTop + e.target.offsetHeight ==
-        e.target.scrollHeight
-      ) {
-        // 滚出高度 + 可视区域高度 == 内容高度
-        arrive("bottom");
-      }
-    };
-    // 到达顶部或者底部通知父级元素
-    const arrive = function name(tb) {
-      ctx.emit("arrive", tb);
-    };
-    // 鼠标点击滑块时
-    const moveStart = function (e) {
-      isMove = true;
-      // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
-      // data.translateY 滚动块平移的距离
-      // moveClientY 鼠标点击滑块时，相对滑块的位置
-      moveClientY = e.clientY - data.translateY;
-      moveTo(); //移动时
-      moveEnd(); //鼠标松开时
-    };
-    // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
-    const moveTo = function () {
-      document.onmousemove = (e) => {
-        // 移动时候判断是不是松开，松开就不在执行滑块移动操作
-        if (isMove) {
-          // 移动滑块时，判断时候到达顶部或者底部
-          if (e.clientY - moveClientY > trackHeight - data.barHeight) {
-            // 滑块到达  底部  就不在改变滑块translateY值
-            data.translateY = trackHeight - data.barHeight;
-          } else if (e.clientY - moveClientY < 0) {
-            // 滑块到达  顶部  就不在改变滑块translateY值
-            data.translateY = 0;
-          } else {
-            //改变滑块位置
-            data.translateY = e.clientY - moveClientY;
-          }
-          // 计算出内容盒子滚出顶部的距离
-          data.scrollRef.scrollTop = data.translateY / data.heightPre;
-        }
-      };
-    };
-    // 鼠标从滑块松开时，不在监听滑块移动操作
-    const moveEnd = function () {
-      document.onmouseup = (e) => {
-        if (isMove) {
-          isMove = false;
-        }
-      };
-    };
-
-    return {
-      ...toRefs(data),
-      onMosewheel,
-      moveStart,
-    };
-  },
-});
+};
+</script>
+
+<script lang="ts" setup>
+import "./index.less";
+import { toRefs, onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
+
+export interface LayScrollProps {
+  height?: string;
+  trackColor?: string;
+  thumbColor?: string;
+  thumbWidth?: number;
+}
+
+const props = withDefaults(defineProps<LayScrollProps>(), {
+  height: "100%",
+  trackColor: "rgba(0,0,0,0)",
+  thumbColor: "#eeeeee",
+  thumbWidth: 6,
+});
+
+const emit = defineEmits(["arrive"]);
+
+const scrollRef = ref<HTMLElement | null>(null);
+const barRef = ref<HTMLElement | null>(null);
+
+const data = reactive({
+  translateY: 0, // 滚动块平移的距离
+  heightPre: 0, // 可视高度和内容高度比
+  barHeight: 0, // 滑块高度
+  winWidth: document.body.clientWidth, //初始化浏览器页面宽度
+});
+
+let time = null; // 定时器
+let isMove = false; // 判断鼠标是否点击滑块（为松开）
+let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
+let trackHeight = 0; // 滚动条轨道高度
+let wrapHeight = 0; // 容器高度（可视高度）
+let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
+
+// 页面挂载后计算滚动条
+onMounted(() => {
+  monitorWindow(); //监听窗口尺寸
+  monitorScrollBar(); //监听内容元素尺寸
+  nextTick(() => {
+    //dom渲染后
+    calculationLength(); //初始化延迟更新滚动条
+  });
+});
+
+// 页面卸载清除定时器
+onUnmounted(() => {
+  window.clearInterval(time);
+  time = null;
+});
+
+// 监听页面尺寸改变计算滚动条
+const monitorWindow = function () {
+  let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
+  window.addEventListener("resize", () => {
+    data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
+    clearTimeout(time);
+    time = setTimeout(() => {
+      //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
+      // console.log("浏览器窗口变化更新滚动条");
+      initScrollListner();
+    }, 500);
+  });
+};
+
+//监听内容元素尺寸变化
+const monitorScrollBar = function () {
+  var monitorUl = scrollRef.value.children[0];
+  // var monitorDiv= document;    // 监听document
+  let MutationObserver =
+    window.MutationObserver ||
+    // @ts-ignore
+    window.WebKitMutationObserver ||
+    // @ts-ignore
+    window.MozMutationObserver;
+  let observer = new MutationObserver(function (mutations) {
+    // console.log("内容元素变化更新滚动条");
+    initScrollListner();
+  });
+
+  // 监听子节点增加或者内容撑起的尺寸
+  observer.observe(monitorUl, {
+    attributes: true,
+    childList: true,
+  });
+};
+
+// 初始化延迟监听滚动条
+const calculationLength = function () {
+  // 直接执行initScrollListner函数，获取滚动条长度部准确
+  // 因为页面渲染有延迟，获取dom元素需要延迟
+  // 每间隔10毫秒更新滑块长度
+  time = setInterval(() => {
+    // 计算滚动条长度
+    initScrollListner();
+  }, 50);
+  // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
+  setTimeout(() => {
+    window.clearInterval(time);
+    time = null;
+  }, 2000);
+};
+
+// 计算滚动条高度
+const initScrollListner = function () {
+  let scroll = scrollRef.value;
+  let bar = barRef.value;
+  // scroll有时候拿不到元素，要判断一下
+  if (scroll) {
+    wrapContentHeight = scroll.scrollHeight;
+    wrapHeight = scroll.clientHeight;
+    trackHeight = bar.clientHeight;
+    // console.log(wrapContentHeight ,wrapHeight);
+    // 容器高度 / 内容高度   100 150
+    data.heightPre = wrapHeight / wrapContentHeight;
+    // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
+    data.barHeight = data.heightPre * trackHeight;
+  }
+};
+
+// 内容滚动时，计算滑块移动的距离
+const onMosewheel = function (e) {
+  // scrollTop页面顶部滚出的高度
+  // offsetHeight页面可视区域高度
+  // scrollHeight页面正文全文高度
+  // data.translateY滚动块平移的距离
+  data.translateY = e.target.scrollTop * data.heightPre;
+  if (data.translateY == 0) {
+    // 到达顶部
+    arrive("top");
+  } else if (
+    e.target.scrollTop + e.target.offsetHeight ==
+    e.target.scrollHeight
+  ) {
+    // 滚出高度 + 可视区域高度 == 内容高度
+    arrive("bottom");
+  }
+};
+
+// 到达顶部或者底部通知父级元素
+const arrive = function name(tb) {
+  emit("arrive", tb);
+};
+
+// 鼠标点击滑块时
+const moveStart = function (e) {
+  isMove = true;
+  // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
+  // data.translateY 滚动块平移的距离
+  // moveClientY 鼠标点击滑块时，相对滑块的位置
+  moveClientY = e.clientY - data.translateY;
+  moveTo(); //移动时
+  moveEnd(); //鼠标松开时
+};
+
+// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
+const moveTo = function () {
+  document.onmousemove = (e) => {
+    // 移动时候判断是不是松开，松开就不在执行滑块移动操作
+    if (isMove) {
+      // 移动滑块时，判断时候到达顶部或者底部
+      if (e.clientY - moveClientY > trackHeight - data.barHeight) {
+        // 滑块到达  底部  就不在改变滑块translateY值
+        data.translateY = trackHeight - data.barHeight;
+      } else if (e.clientY - moveClientY < 0) {
+        // 滑块到达  顶部  就不在改变滑块translateY值
+        data.translateY = 0;
+      } else {
+        //改变滑块位置
+        data.translateY = e.clientY - moveClientY;
+      }
+      // 计算出内容盒子滚出顶部的距离
+      scrollRef.value.scrollTop = data.translateY / data.heightPre;
+    }
+  };
+};
+
+// 鼠标从滑块松开时，不在监听滑块移动操作
+const moveEnd = function () {
+  document.onmouseup = (e) => {
+    if (isMove) {
+      isMove = false;
+    }
+  };
+};
+
+let dataRef = toRefs(data);
 </script>

package/component/src/component/slider/Standard.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "StandardVue",
+};
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
@@ -11,6 +17,7 @@ interface Prop {
   min?: number;
   max?: number;
 }
+
 const props = withDefaults(defineProps<Prop>(), {
   disabled: false,
   val: 0,

package/component/src/component/slider/StandardRange.vue

@@ -1,8 +1,15 @@
+<script lang="ts">
+export default {
+  name: "StandardRange",
+};
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
 import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
+
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
@@ -17,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
   max: 100,
   disabled: false,
 });
+
 let rv = toRef(props, "rangeValue");
 
 const moveAction = throttle(rangeMove);

package/component/src/component/slider/Vertical.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "Vertical",
+};
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
@@ -11,6 +17,7 @@ interface Prop {
   min?: number;
   max?: number;
 }
+
 const props = withDefaults(defineProps<Prop>(), {
   disabled: true,
   val: 0,

package/component/src/component/slider/VerticalRange.vue

@@ -1,8 +1,15 @@
+<script lang="ts">
+export default {
+  name: "VerticalRange",
+};
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
 import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
+
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;

package/component/src/component/slider/index.less

@@ -17,7 +17,7 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;
@@ -73,7 +73,7 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;

package/component/src/component/slider/index.vue

@@ -1,6 +1,12 @@
+<script lang="ts">
+export default {
+  name: "LaySlider",
+};
+</script>
+
 <script setup lang="ts">
-import { Ref, toRef } from "vue";
 import "./index.less";
+import { Ref, toRef } from "vue";
 import StandardVue from "./Standard.vue";
 import StandardRange from "./StandardRange.vue";
 import Vertical from "./Vertical.vue";

package/component/src/component/slider/sliderVerify.vue

@@ -1,168 +0,0 @@
-<template>
-  <div id="sliderVerify" class="slider-item">
-    <div class="slider-bg layui-bg-green"></div>
-    <div class="slider-text">
-      {{ prototype.isOk == false ? prototype.text : prototype.success }}
-    </div>
-    <div
-      :class="
-        prototype.isOk == false
-          ? 'slider-btn layui-icon layui-icon-next'
-          : 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'
-      "
-      @mousedown.stop="down"
-    ></div>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref, defineProps } from "vue";
-import { on, off } from "evtd";
-import { throttle, handle_select } from "./utils/index";
-interface Prop {
-  disabled?: boolean;
-  bg?: string;
-  text?: string;
-  end?: string;
-  success?: Function;
-}
-
-const props = withDefaults(defineProps<Prop>(), {
-  disabled: false,
-});
-
-//默认配置
-const prototype = reactive({
-  isOk: false,
-  bg: props.bg, //默认滑块颜色
-  text: props.text ? props.text : "请拖动滑块验证",
-  success: props.end ? props.end : "验证通过",
-  ok: props.success,
-});
-
-//是否为移动端
-/*  prototype.isMobile = function () {
-   return (
-     device.os == "ios" ||
-     device.os == "android" ||
-     device.android ||
-     device.ios ||
-     (device.weixin && typeof device.weixin === Boolean)
-   );
- }; */
-
-const moveAction = throttle(move);
-let distance;
-let downX;
-
-//按下
-const down = function (e) {
-  e = e || window.event;
-  console.log(e.path);
-  distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
-  //按下的坐标
-  downX = e.clientX;
-  on("selectstart", window, handle_select, { once: true });
-  on("mouseup", window, stop);
-  on("mousemove", window, moveAction);
-};
-
-//移动
-function move(e) {
-  e = e || window.event;
-  let moveX = e.clientX;
-  //鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
-  let offsetX = moveX - downX;
-  if (offsetX > 0) {
-    e.path[0].style.left = offsetX + "px";
-    e.path[1].childNodes[0].style.width = offsetX + "px";
-    //鼠标的水平移动距离 >= 滑动成功的宽度
-    if (offsetX >= distance) {
-      prototype.isOk = true;
-      //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
-      off("mousedown", window, down);
-      off("mousemove", window, moveAction);
-      //最后调用回调
-      if (prototype.ok) prototype.ok();
-    }
-  }
-}
-
-//放开
-const stop = function (e) {
-  //鼠标松开，如果滑到了终点，则验证通过
-  if (prototype.isOk === true) {
-    return;
-  } else {
-    e.path[0].style.left = 0;
-    e.path[1].childNodes[0].style.width = 0;
-  }
-
-  //鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
-  off("selectstart", document, handle_select);
-  off("mouseup", window, stop);
-  off("mousemove", window, moveAction);
-};
-</script>
-
-<style scoped>
-.slider-item {
-  height: 38px;
-  line-height: 38px;
-  background-color: #d0d0d0;
-  position: relative;
-  border: 1px solid white;
-}
-
-.slider-bg {
-  position: absolute;
-  width: 40px;
-  height: 100%;
-  z-index: 100;
-}
-
-.slider-btn {
-  width: 40px;
-  height: 96%;
-  position: absolute;
-  border: 1px solid #ccc;
-  cursor: move;
-  text-align: center;
-  background-color: #fff;
-  user-select: none;
-  color: #666;
-  z-index: 120;
-}
-
-.slider-btn:hover {
-  cursor: pointer;
-}
-
-.slider-btn-success {
-  font-size: 22px;
-}
-
-.slider-text {
-  position: absolute;
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-  font-size: 14px;
-  color: #fff;
-  z-index: 120;
-}
-
-.slider-error {
-  animation: glow 800ms ease-out infinite alternate;
-}
-
-@keyframes glow {
-  0% {
-    border-color: #e6e6e6;
-  }
-
-  100% {
-    border-color: #ff5722;
-  }
-}
-</style>

package/component/src/component/table/index.vue

@@ -270,12 +270,12 @@ onMounted(() => {
                 </th>
                 <template v-for="column in columns" :key="column">
                   <th
+                    v-if="tableColumnKeys.includes(column.key)"
                     class="layui-table-cell"
                     :style="{
                       textAlign: column.align,
                       flex: column.width ? '0 0 ' + column.width : '1',
                     }"
-                    v-if="tableColumnKeys.includes(column.key)"
                   >
                     <span>
                       <template v-if="column.titleSlot">
@@ -285,10 +285,11 @@ onMounted(() => {
                         {{ column.title }}
                       </template>
                     </span>
+                    <!-- 插槽 -->
                     <span
                       v-if="column.sort"
                       class="layui-table-sort layui-inline"
-                      lay-sort=""
+                      lay-sort
                     >
                       <i
                         @click.stop="sortTable($event, column.key, 'asc')"

package/component/src/theme/public.less

@@ -116,6 +116,11 @@ a:hover {
   color: #777;
 }
 
+a cite {
+  font-style: normal;
+  *cursor: pointer;
+}
+
 .layui-border-box,
 .layui-border-box * {
   box-sizing: border-box;