factory-ui/src/components/TableFormCol/index.vue

<template>
  <el-table-column class="table-form-col" align="center" :width="width" :show-overflow-tooltip="showOverflowTooltip">
    <template #header>
      <span :class="required ? 'required-label' : ''">{{label}}</span>
    </template>
    <template scope="d">
      <form-col table label-width="0" :prop="colProp(d.$index)" :rules="rules">
        <slot :row="d.row"/>
      </form-col>
    </template>
  </el-table-column>
</template>

<script>
import FormCol from '@/components/FormCol/index.vue'
import HoverShow from '@/components/HoverShow/index.vue'
import { isEmpty } from '@/utils'

export default {
  name: "TableFormCol",
  components: { HoverShow, FormCol },
  props: {
    label: {
      type: String,
      default: null,
    },
    required: {
      type: Boolean,
      default: false,
    },
    propPrefix: {
      type: String,
      default: null,
    },
    prop: {
      type: String,
      default: null,
    },
    rules: {
      type: Array,
      default: () => ([])
    },
    width: {
      type: String,
      default: null,
    },
    showOverflowTooltip: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    colProp() {
      return (index) => {
        if (isEmpty(this.propPrefix) || isEmpty(this.prop)) {
          return null;
        }
        return `${this.propPrefix}[${index}].${this.prop}`;
      }
    }
  }
}
</script>