lis8.0-vue3/src/views/liswork/xmKnowledge/TableData.vue

<template>
  <CustomTable ref="tableRefRight" :data="dataList" :columns="columnsRight" :enable-column-drag="true"
    @column-drag-end="handleColumnDragEnd" :config="tableConfig">
    <template #reserve="{ row }">
      {{ reserve(row.reserve) }}
    </template>
  </CustomTable>
</template>

<script setup lang="ts">
import CustomTable from '@/components/ElTable/index.vue'

const props = defineProps({
  dataList: {
    type: Array,
    required: false,
    default: []
  },
  styleConfig: {
    type: Object,
    required: false,
    default: {
      reserveWidth: 50,
      textresultWidth: 200,
      zdWidth: 100,
      tableHeight: '100%'
    }

  }
})

//const dataListRight = ref([]);
const columnsRight = ref([
  { prop: 'reserve', label: '类别', visible: true, align: 'center', slot: 'reserve', },
  { prop: 'textresult', label: '说明', visible: true, align: 'center', showOverflowTooltip: false },
  { prop: 'zd', label: '指导建议', visible: true, align: 'center', showOverflowTooltip: false },
])

const tableConfig = ref({
  border: true, // 边框
  height: props.styleConfig.tableHeight, // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})

//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columnsRight.value = data.columns;
}


const reserve = (reserve: string) => {
  switch (reserve) {
    case '1':
      return '综述'
    case 'H':
      return '偏高'
    case 'L':
      return '偏低'
    case 'P':
      return '阳性'
    case 'Q':
      return '弱阳性'
    case 'J':
      return '危机'
    case 'N':
      return '阴性'
  }
}


</script>

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