@fesjs/fes-design/es/table/components/cell.js

fes-design for PC

import { defineComponent, inject, createVNode, Fragment, isVNode } from 'vue';
import { isPlainObject, isArray, isFunction, isNil } from 'lodash-es';
import Button from '../../button/button';
import Ellipsis from '../../ellipsis/ellipsis';
import { provideKey } from '../const';
import { stringify } from '../../_util/utils';

const cellProps = {
  row: {
    type: Object,
    required: true
  },
  rowIndex: Number,
  column: {
    type: Object,
    required: true
  },
  columnIndex: Number,
  cellValue: [String, Number, Date, Boolean, Array, Object, Function, Symbol]
};
const COMPONENT_NAME = 'FTableCell';
var cell = defineComponent({
  name: COMPONENT_NAME,
  props: cellProps,
  setup(props) {
    const {
      prefixCls
    } = inject(provideKey);
    return () => {
      var _column$slots, _column$props, _column$props$formatt;
      const {
        row,
        column,
        cellValue
      } = props;
      if (column.props.action) {
        let actions = [];
        if (isPlainObject(column.props.action)) {
          actions = [column.props.action];
        }
        if (isArray(column.props.action)) {
          actions = column.props.action;
        }
        actions = actions.filter(action => action.label && isFunction(action.func));
        return createVNode("div", {
          "class": `${prefixCls}-action`
        }, [actions.map(action => createVNode(Button, {
          "class": `${prefixCls}-action-item`,
          "type": "link",
          "onClick": () => {
            action.func(row);
          }
        }, {
          default: () => [action.label]
        }))]);
      }
      const hasEllipsis = !isNil(column.props.ellipsis) && column.props.ellipsis !== false;
      const ellipsisProps = isPlainObject(column.props.ellipsis) ? column.props.ellipsis : {};
      if (column !== null && column !== void 0 && (_column$slots = column.slots) !== null && _column$slots !== void 0 && _column$slots.default) {
        return hasEllipsis ? createVNode(Ellipsis, ellipsisProps, {
          default: () => [column.slots.default(props)]
        }) : createVNode(Fragment, null, [column.slots.default(props)]);
      }
      const formatterResult = column === null || column === void 0 || (_column$props = column.props) === null || _column$props === void 0 || (_column$props$formatt = _column$props.formatter) === null || _column$props$formatt === void 0 ? void 0 : _column$props$formatt.call(_column$props, props);
      if (isVNode(formatterResult)) {
        return createVNode(Fragment, null, [formatterResult]);
      }
      const result = formatterResult !== null && formatterResult !== void 0 ? formatterResult : cellValue;
      Object.assign(ellipsisProps, {
        content: result
      });
      return hasEllipsis ? createVNode(Ellipsis, ellipsisProps, null) : createVNode(Fragment, null, [typeof result === 'object' ? stringify(result, err => console.warn(`[${COMPONENT_NAME}]: render error occurred due to \n`, err)) : result]);
    };
  }
});

export { cell as default };