seat-tools/src/components/cus/CusTableColumn.vue

<template>
  <template v-if="item?.show">
    <slot :name="`${item?.value}-column`" :column="item">
      <el-table-column
        :show-overflow-tooltip="!item?.popover"
        :label="item?.label"
        :prop="item?.value"
        :column-key="item?.value"
        :sortable="item?.sort ? 'custom' : false"
        :width="item?.width ? item?.width : 'auto'"
        :align="item?.align ? item?.align : 'center'"
        :header-align="item?.headerAlign ? item?.headerAlign : 'center'"
        :fixed="item?.fixed ? item?.fixed : false"
        :filters="item?.filters ? item?.filters : null"
        :filter-multiple="!!item?.filterMultiple"
      >
        <template #default="scope">
          <template v-if="item.html">
            <div v-html="scope?.row[item?.value]"></div>
          </template>
          <template v-else>
            <slot :name="`${item?.value}-column-value`" :scope="scope">
              <CusPopover v-if="item?.popover" :value="scope?.row[item?.value]">
                <div class="__text-ellipsis">{{ scope?.row[item?.value] }}</div>
              </CusPopover>
              <template v-else>
                {{ scope?.row[item?.value] }}
              </template>
            </slot>
          </template>
        </template>
      </el-table-column>
    </slot>
  </template>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "CusTableColumn",
  props: {
    item: {
      required: true
    },
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const that = (getCurrentInstance() as ComponentInternalInstance)?.appContext
      ?.config?.globalProperties;
    return {};
  },
});
</script>

<style scoped lang="scss">
  .cus-table-column-popover {

  }
</style>