smart-search-web/src/components/cus/CusTableColumn.vue

<template>
  <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'"
      :min-width="item?.minWidth ? item.minWidth : ''"
      :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">
            {{ scope?.row[item?.value] }}
<!--            <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>
      <template #header>
        <slot :name="`${item?.value}-header-value`"/>
      </template>
    </el-table-column>
  </slot>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CusTableColumn',
});
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance()
const props = defineProps({
  item: {
    required: true
  },
})
const state: any = reactive({})

const onPage = () => {
}
</script>

<style lang="scss" scoped>
</style>