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

<template>
  <el-table-column class="table-form-col" :align="align" :width="width" >
    <template #header>
      <span :class="required ? 'required-label' : ''">{{label}}</span>
      <el-tooltip v-if="!isEmpty(tips)" :content="tips" placement="top">
        <i class="el-icon-question" style="cursor: pointer;"/>
      </el-tooltip>
    </template>
    <template scope="d">
      <form-col table label-width="0" :prop="colProp(d.$index)" :rules="rules">
        <el-popover
          v-if="showOverflowTooltip"
          placement="top"
          width="250"
          trigger="hover">
          <slot name="content-tip" :row="d.row" :index="d.$index"/>
          <template #reference>
            <slot :row="d.row" :index="d.$index"/>
          </template>
        </el-popover>

        <slot v-else :row="d.row" :index="d.$index"/>
      </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: {
    align: {
      type: String,
      default: "center"
    },
    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,
    },
    tips: {
      type: String,
      default: null,
    }
  },
  computed: {
    colProp() {
      return (index) => {
        if (isEmpty(this.propPrefix) || isEmpty(this.prop)) {
          return null;
        }
        return `${this.propPrefix}[${index}].${this.prop}`;
      }
    }
  },
  methods: {
    isEmpty,
  }
}
</script>