lis8.0-vue3/src/views/liswork/labItem/tab/commonDescriptions.vue

<template>
<!-- 常见描述 -->
<div>
  <div class="modifyClass">
    <el-button type="primary" @click="onAddClick">增加</el-button>
    <el-button type="primary" @click="onDelClick">删除</el-button>
  </div>
  <CustomTable ref="tableRef" :data="tableList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig" @row-click="rowClick">
    <template #textresult="{row}">
      <el-input type="textarea" v-model="row.textresult" class="full-width-input" autosize></el-input>
    </template>
  </CustomTable>
</div>
</template>


<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { XmTextresultNew } from '@/types';
import { ElMessageBox } from 'element-plus';
import { ref } from 'vue';


const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  },
  formData: {
    type: Object,
    default: {}
  }
});

const tableRef = ref();
const tableList = ref<Array<XmTextresultNew>>([])
const columns = ref([
  { prop: 'textresult', label: '文字描述', visible: true, align: 'center',slot: 'textresult', width: 500,showOverflowTooltip:false },
]);
const tableConfig = ref({
  border: true, // 边框
  height: '80vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})


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

const selectRow = ref()

//序号最大值
const maxXh = computed(() => {
  return tableList.value.length > 0 ? Math.max(...tableList.value.map((item:any) => item.xh || 0)) : 0;
});

const rowClick = (row:any) => {
  selectRow.value = row
}


const onAddClick = () => {
  const newData: XmTextresultNew = {
    xmid: props.formData.xmid,
    xmdh: props.formData.xmdh,
    xh: maxXh.value + 1
  }
  tableList.value.push(newData)
}

const onDelClick = async ()=> {
  if(selectRow.value){
     await ElMessageBox.confirm('是否要删除选中的数据?','警告',
    { confirmButtonText: 'OK',cancelButtonText: 'Cancel',type: 'warning',});
    tableList.value = tableList.value.filter((item:any) => item.xh != selectRow.value.xh)
  }

}


watch(
  () => props.dataList,
  (newVal:any) => {
    tableList.value = newVal;
  }
);



</script>

<style lang="scss" scoped>
:deep(.el-table .cell) {
  padding: 0;
}
</style>