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

fes-design for PC

import { defineComponent, inject, createVNode } from 'vue';
import { DownOutlined } from '../../icon';
import FCheckbox from '../../checkbox/checkbox.js';
import { provideKey } from '../const';
import FRadio from '../../radio';
import Cell from './cell';

var td = defineComponent({
  name: 'FTableBodyTd',
  props: {
    columns: {
      type: Array,
      required: true
    },
    row: {
      type: Object,
      required: true
    },
    rowIndex: Number,
    column: {
      type: Object,
      required: true
    },
    columnIndex: Number,
    onClick: Function
  },
  setup(props) {
    const {
      prefixCls,
      showData,
      columns,
      getCellSpan,
      getCellClass,
      getCustomCellClass,
      getCellStyle,
      getCustomCellStyle,
      isSelected,
      isSelectDisabled,
      handleSelect,
      handleExpand,
      getCellValue
    } = inject(provideKey);
    return () => {
      const {
        row,
        column,
        rowIndex,
        columnIndex
      } = props;
      const {
        rowspan,
        colspan
      } = getCellSpan(props);
      if (!rowspan || !colspan) {
        return null;
      }
      const isLastRow = rowIndex + Number(rowspan) >= showData.value.length;
      const isLastColumn = columnIndex + Number(colspan) >= columns.value.length;
      return createVNode("td", {
        "rowspan": rowspan,
        "colspan": colspan,
        "style": [getCellStyle({
          row,
          column,
          columns: props.columns
        }), getCustomCellStyle({
          row,
          column,
          rowIndex,
          columnIndex
        })],
        "class": [`${prefixCls}-td`, isLastRow && 'is-last-row', isLastColumn && 'is-last-column', ...getCellClass({
          column,
          columns: props.columns
        }), ...getCustomCellClass({
          row,
          column,
          rowIndex,
          columnIndex
        })],
        "onClick": props.onClick
      }, [column.props.type === 'default' && createVNode(Cell, {
        "row": row,
        "rowIndex": rowIndex,
        "column": column,
        "columnIndex": columnIndex,
        "cellValue": getCellValue(row, column)
      }, null), column.props.type === 'selection' && createVNode("div", {
        "class": `${prefixCls}-center`
      }, [column.props.multiple ? createVNode(FCheckbox, {
        "modelValue": isSelected({
          row
        }),
        "disabled": isSelectDisabled({
          row
        }),
        "onChange": () => {
          handleSelect({
            row
          });
        }
      }, null) : createVNode(FRadio, {
        "modelValue": isSelected({
          row
        }),
        "disabled": isSelectDisabled({
          row
        }),
        "onChange": () => {
          handleSelect({
            row
          });
        }
      }, null)]), column.props.type === 'expand' && createVNode("div", {
        "class": `${prefixCls}-center`
      }, [createVNode(DownOutlined, {
        "class": `${prefixCls}-expand-icon`,
        "onClick": () => {
          handleExpand({
            row
          });
        }
      }, null)])]);
    };
  }
});

export { td as default };