yuang-framework-ui-pc/es/ele-virtual-table/components/body-cell.js

yuang-framework-ui-pc Library

import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, createCommentVNode, withModifiers, createVNode, withCtx, createBlock, normalizeProps, mergeProps, createTextVNode, toDisplayString } from "vue";
import { ElIcon } from "element-plus";
import { getValue } from "../../utils/core";
import { ArrowDown, LoadingDotOutlined } from "../../icons";
import CellCheckbox from "./cell-checkbox";
import { CellRender, getCellSpan, getIndexValue } from "../util";
const _sfc_main = defineComponent({
  name: "BodyCell",
  components: {
    ElIcon,
    ArrowDown,
    LoadingDotOutlined,
    CellCheckbox,
    CellRender
  },
  props: {
    /** 列配置 */
    column: {
      type: Object,
      required: true
    },
    /** 列索引 */
    columnIndex: {
      type: Number,
      required: true
    },
    /** 行索引 */
    rowIndex: {
      type: Number,
      required: true
    },
    /** 行数据 */
    rowData: {
      type: Object,
      required: true
    },
    /** 所有列的列宽 */
    colSizes: {
      type: Array,
      required: true
    },
    /** 单元格类名自定义 */
    bodyCellClass: [String, Function],
    /** 单元格样式自定义 */
    bodyCellStyle: [Object, Function],
    /** 单元格合并行列方法 */
    spanMethod: Function,
    /** 溢出提示组件全局属性 */
    tableTooltipProps: [Boolean, Object],
    /** 序号列起始编号 */
    pageIndex: Number,
    /** 表格行高 */
    rowHeight: Number,
    /** 多选当前行是否选中 */
    isChecked: Boolean,
    /** 多选当前行是否禁用 */
    isDisabled: Boolean,
    /** 表格尺寸 */
    tableSize: String,
    /** 树表格展开图标的列 */
    expandColumnKey: String,
    /** 树表格当前行是否有子级 */
    hasChildren: Boolean,
    /** 树表格当前行缩进 */
    rowIndent: String,
    /** 树表格当前行是否折叠 */
    isCollapse: Boolean,
    /** 树表格子级加载状态 */
    loading: Boolean,
    /** 是否需要固定单元格高度 */
    fixedCellHeight: Boolean,
    /** 表格是否是自适应行高 */
    autoRowHeight: Boolean
  },
  emits: {
    /** 多选框选中改变事件 */
    checkedChange: (_checked) => true,
    /** 展开状态改变事件 */
    expandChange: (_expanded) => true,
    /** 点击事件 */
    click: (_col, _e) => true,
    /** 双击事件 */
    dblclick: (_col, _e) => true,
    /** 右键事件 */
    contextmenu: (_col, _e) => true,
    /** 鼠标移入事件 */
    mouseenter: (_col, _e) => true,
    /** 鼠标移出事件 */
    mouseleave: (_col, _e) => true
  },
  setup(props, { emit, slots }) {
    const originalCol = computed(() => props.column.originalCol);
    const colType = computed(() => originalCol.value.type ?? "");
    const cellParam = computed(() => {
      return {
        column: originalCol.value,
        columnIndex: props.columnIndex,
        rowIndex: props.rowIndex,
        row: props.rowData
      };
    });
    const cellSpan = computed(() => {
      const span = getCellSpan(cellParam.value, props.spanMethod);
      if (["indedx", "selection", "expand"].includes(colType.value)) {
        span.rowspan = 1;
      }
      return span;
    });
    const isEllipsis = computed(() => {
      if (colType.value === "selection" || colType.value === "expand") {
        return true;
      }
      const col = originalCol.value;
      if (col && col.showOverflowTooltip != null) {
        return col.showOverflowTooltip !== false;
      }
      return !!props.tableTooltipProps;
    });
    const cellClass = computed(() => {
      const classes = ["el-table-v2__row-cell", "ele-table-td"];
      if (!cellSpan.value.colspan) {
        classes.push("is-none");
      } else if (cellSpan.value.colspan > 1) {
        classes.push("is-multi-cell");
      }
      if (!cellSpan.value.rowspan) {
        classes.push("is-placeholder");
      } else if (cellSpan.value.rowspan > 1) {
        classes.push("is-multi-row");
      }
      if (colType.value === "index") {
        classes.push("is-index");
      }
      if (colType.value === "selection") {
        classes.push("is-selection");
      }
      if (colType.value === "expand") {
        classes.push("is-expand");
      }
      const col = originalCol.value;
      if (col) {
        if (col.align) {
          classes.push("is-align-" + col.align);
        }
        if (isEllipsis.value) {
          classes.push("is-ellipsis");
        }
        if (col.fixed === "right") {
          classes.push("is-fixed-right");
        } else if (col.fixed === "left" || col.fixed === true) {
          classes.push("is-fixed-left");
        }
        if (props.column) {
          if (props.column.isFixedLeftLast) {
            classes.push("is-fixed-left-last");
          }
          if (props.column.isFixedRightFirst) {
            classes.push("is-fixed-right-first");
          }
        }
        if (typeof props.bodyCellClass === "function") {
          const temp = props.bodyCellClass(cellParam.value);
          if (temp) {
            classes.push(temp);
          }
        } else if (props.bodyCellClass) {
          classes.push(props.bodyCellClass);
        }
        if (col.className) {
          classes.push(col.className);
        }
      }
      return classes.join(" ");
    });
    const cellWidth = computed(() => {
      const colspan = cellSpan.value.colspan;
      if (colspan === 0) {
        return "0px";
      }
      let width = props.colSizes[props.columnIndex].width || 0;
      if (colspan && colspan > 1) {
        const end = props.columnIndex + colspan;
        for (let i = props.columnIndex; i < end; i++) {
          if (props.colSizes[i] && props.colSizes[i].width != null) {
            width += props.colSizes[i].width;
          }
        }
      }
      return width + "px";
    });
    const cellHeight = computed(() => {
      if (props.fixedCellHeight && props.rowHeight != null) {
        return props.rowHeight + "px";
      }
      const rowspan = cellSpan.value.rowspan;
      if (props.rowHeight == null || rowspan == null || rowspan <= 1) {
        return;
      }
      return rowspan * props.rowHeight + "px";
    });
    const cellMinHeight = computed(() => {
      if (!props.autoRowHeight || !props.rowHeight) {
        return;
      }
      return props.rowHeight + "px";
    });
    const colSize = computed(() => {
      if (!props.colSizes || props.columnIndex == null) {
        return;
      }
      return props.colSizes[props.columnIndex];
    });
    const cellStyle = computed(() => {
      const userStyle = props.bodyCellStyle;
      const param = cellParam.value;
      return [
        {
          width: cellWidth.value,
          height: cellHeight.value,
          minHeight: cellMinHeight.value,
          left: colSize.value ? colSize.value.fixedLeft : void 0,
          right: colSize.value ? colSize.value.fixedRight : void 0
        },
        (typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
      ];
    });
    const cellText = computed(() => {
      const col = originalCol.value;
      if (col && col.type === "index") {
        if (typeof col.index === "function") {
          return;
        }
        return getIndexValue(props.rowIndex, col.index, props.pageIndex);
      }
      const prop = props.column ? props.column.dataKey : void 0;
      const { rowspan, colspan } = cellSpan.value;
      if (rowspan === 0 || colspan === 0 || prop == null || !props.rowData) {
        return;
      }
      return getValue(props.rowData, prop);
    });
    const isExpandCol = computed(() => {
      return props.column != null && props.expandColumnKey != null && props.expandColumnKey === props.column.key;
    });
    const renderOpt = computed(() => {
      const col = originalCol.value;
      const { rowspan, colspan } = cellSpan.value;
      if (col && rowspan !== 0 && colspan !== 0) {
        const { rowIndex, rowData } = props;
        if (col.type === "index") {
          if (typeof col.index === "function") {
            return { render: col.index, params: [rowIndex] };
          }
          return {};
        }
        if (col.slot && typeof slots[col.slot] === "function") {
          return {
            render: slots[col.slot],
            params: [{ row: rowData, column: col, $index: rowIndex }]
          };
        }
        if (typeof col.formatter === "function") {
          return {
            render: col.formatter,
            params: [rowData, col, cellText.value, rowIndex]
          };
        }
      }
      return {};
    });
    const handleTextClick = (e) => {
      if (colType.value === "selection") {
        e.stopPropagation();
      }
    };
    const handleCheckedChange = (checked) => {
      emit("checkedChange", checked);
    };
    const handleExpandChange = () => {
      if (!props.loading) {
        emit("expandChange", props.isCollapse);
      }
    };
    const handleClick = (e) => {
      emit("click", originalCol.value, e);
    };
    const handleDblclick = (e) => {
      emit("dblclick", originalCol.value, e);
    };
    const handleContextmenu = (e) => {
      emit("contextmenu", originalCol.value, e);
    };
    const handleMouseenter = (e) => {
      emit("mouseenter", originalCol.value, e);
    };
    const handleMouseleave = (e) => {
      emit("mouseleave", originalCol.value, e);
    };
    return {
      colType,
      cellClass,
      cellStyle,
      cellText,
      isExpandCol,
      renderOpt,
      handleTextClick,
      handleCheckedChange,
      handleExpandChange,
      handleClick,
      handleDblclick,
      handleContextmenu,
      handleMouseenter,
      handleMouseleave
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 2,
  class: "ele-table-placeholder"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_LoadingDotOutlined = resolveComponent("LoadingDotOutlined");
  const _component_ArrowDown = resolveComponent("ArrowDown");
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_CellCheckbox = resolveComponent("CellCheckbox");
  const _component_CellRender = resolveComponent("CellRender");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.cellClass),
    style: normalizeStyle(_ctx.cellStyle),
    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
    onDblclick: _cache[3] || (_cache[3] = (...args) => _ctx.handleDblclick && _ctx.handleDblclick(...args)),
    onContextmenu: _cache[4] || (_cache[4] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args)),
    onMouseenter: _cache[5] || (_cache[5] = (...args) => _ctx.handleMouseenter && _ctx.handleMouseenter(...args)),
    onMouseleave: _cache[6] || (_cache[6] = (...args) => _ctx.handleMouseleave && _ctx.handleMouseleave(...args))
  }, [
    createElementVNode("div", {
      class: "ele-table-cell",
      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
    }, [
      _ctx.isExpandCol ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
        _ctx.rowIndent ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "ele-table-indent",
          style: normalizeStyle({ width: _ctx.rowIndent })
        }, null, 4)) : createCommentVNode("", true),
        _ctx.hasChildren ? (openBlock(), createElementBlock("div", {
          key: 1,
          class: normalizeClass(["ele-table-expand", { "is-collapse": _ctx.isCollapse }]),
          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleExpandChange && _ctx.handleExpandChange(...args), ["stop"]))
        }, [
          createVNode(_component_ElIcon, {
            class: normalizeClass({ "is-loading": _ctx.loading })
          }, {
            default: withCtx(() => [
              _ctx.loading ? (openBlock(), createBlock(_component_LoadingDotOutlined, { key: 0 })) : (openBlock(), createBlock(_component_ArrowDown, { key: 1 }))
            ]),
            _: 1
          }, 8, ["class"])
        ], 2)) : (openBlock(), createElementBlock("div", _hoisted_1))
      ], 64)) : createCommentVNode("", true),
      _ctx.colType === "selection" ? (openBlock(), createBlock(_component_CellCheckbox, {
        key: 1,
        checked: _ctx.isChecked,
        disabled: _ctx.isDisabled,
        size: _ctx.tableSize,
        onChange: _ctx.handleCheckedChange
      }, null, 8, ["checked", "disabled", "size", "onChange"])) : _ctx.colType !== "expand" ? (openBlock(), createBlock(_component_CellRender, normalizeProps(mergeProps({ key: 2 }, _ctx.renderOpt)), {
        default: withCtx(() => [
          createTextVNode(toDisplayString(_ctx.cellText), 1)
        ]),
        _: 1
      }, 16)) : createCommentVNode("", true)
    ])
  ], 38);
}
const bodyCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  bodyCell as default
};