logpm_page/src/components/tablecmt/tablecmt.vue

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :show-summary="shownm"
    :summary-method="getSummaries"
    v-loading="loading"
    @selection-change="handleSelectionChange"
    height="600"
  >
    <el-table-column
      :type="column.type == 0 ? 'selection' : ''"
      :width="column.width"
      v-for="(column,index) in newcolumnList"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :fixed="column.fixed"
      :sortable="column.sortable"
      v-show="column.head"
    >
      <el-table-column
        :width="column.width"
        :prop="column.prop"
        :label="column.label"
        v-if="column.type != 0"
      >
        <template #header>
          <!-- <el-text class="mx-1">{{ column.label }}</el-text> -->
          <el-input
            v-if="column.type == 2"
            v-model="column.values"
            clearable
            :placeholder="`请输入${column.label}`"
            @change="inputchange($event,column)"
            @blur="inputchange($event,column)"
            @clear="inputclear($event,column)"
          />
          <el-select
            v-if="column.type == 3"
            v-model="column.values"
            class="m-2"
            clearable
            :placeholder="`请选择${column.label}`"
            @change="selectchange($event,column)"
            @clear="selectclear($event,column)"
          >
            <el-option
              v-for="item in column.checkarr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="column.values"
            v-if="column.type == 4"
            type="date"
            clearable
            style="width: 150px;"
            :placeholder="`请选择${column.label}`"
            @change="timechange($event,column)"
            @clear="timeclear($event,column)"
          />
          <el-date-picker
            v-model="column.values"
            v-if="column.type == 5"
            type="datetime"
            clearable
            style="width: 190px;"
            :placeholder="`请选择${column.label}`"
            format="YYYY/MM/DD HH:mm:ss"
            @change="timechange($event,column)"
            @clear="timeclear($event,column)"
          />
        </template>

        <template #default="scope">
          <el-text class="mx-2" v-if="Number(column.type)<6&&Number(column.type)>0">{{ scope.row[column.prop] }}</el-text>
          <slot v-if="column.type == 6" :scope="scope"></slot>
          <!-- <slot v-if="column.type == 7" name="test" :testdata="scope"></slot> -->
          <!-- <el-button
            v-if="column.type == 6"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            v-if="column.type == 6"
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          > -->
        </template>
      </el-table-column>

      <template #header>
        <el-text class="mx-1">{{ column.label }}</el-text>
        <!-- <el-input
          v-if="column.type == 2"
          v-model="column.values"
          clearable
          size="10"
          placeholder="Type to search"
        /> -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { computed, ref,watchEffect } from 'vue';
import type { PropType } from 'vue';

/**
   * 对应通知事件
   * inputTxt:输入框输入的确认事件
   * timeCheck:时间选择器选择事件
   * selectCheck:下拉框选中事件
   * selection:勾选框事件
   */

interface TableColumnType {
  /** 表格列的key */
  prop: string;
  /** 表格列的名字 */
  label: string;
  /**
   * 对应列表头的类型
   * 0:直接显示为单选，prop，label，全部传空
   * 1:普通表格，正常显示
   * 2:带输入框表格
   * 3:带下拉框表格
   * 4:带日期选择器列
   * 5:带日期时间选择器
   * 6:操作栏，prop，label，全部传空
   * 7:测试
   */
  type: number | string;
  /** 用于接受表头的值 */
  values: number | string;
  /** 表头宽度 number string undefined */
  width: number | string | undefined;
  /** 下拉框可选项 */
  checkarr?: {
    value: string | number;
    label: string | number;
  }[];
  /** 是否固定表头
   * true false
   * left right
   */
  fixed: boolean | string;
  /** 是否统计
   * true false 或者直接不写该参数
   */
  isshowSummary?: boolean;
  /** 是否排序
   * true false 或者直接不写该参数
   */
  sortable?:boolean;
  /** 是否显示列
   * true false 或者直接不写该参数
   */
  head?:boolean
}
interface TableDataType {
  [key: string]: any;
}
let props = defineProps({
  columnList: {
    type: Array as PropType<TableColumnType[]>,
    required: true,
  },
  tableData: {
    type: Array as PropType<TableDataType[]>,
    required: true,
  },
  loading:{
    type: Boolean as PropType<boolean>,
    required: true,
  }
});
let emit =defineEmits(['inputTxt','timeCheck','selectCheck','selection'])
let newcolumnList=ref<TableColumnType[]>([])
watchEffect(()=>{
  newcolumnList.value=[]
  props.columnList.map(item=>{
    if(!item.head){
      newcolumnList.value.push(item)
    }
  })
})
// const tableData = ref([
//     {
//       id: 1,
//       name: '张三',
//       age: 20,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     {
//       id: 2,
//       name: '李四',
//       age: 25,
//       time:'2022-12-13'
//     },
//     // 更多数据...
//   ] as TableDataType[]) // 将数据应用到 TableDataType 类型上

// let columnList = ref([
//     {
//       prop: '',
//       label: '',
//       type: 0,
//       values: '',
//       width: 55,
//       checkarr:[],
//       fixed:true
//     },
//     {
//       prop: 'id',
//       label: 'ID',
//       type: 2,
//       values: '',
//       width: '110',
//       checkarr:[],
//       fixed:true
//     },
//     {
//       prop: 'name',
//       label: '姓名',
//       type: 3,
//       values: '',
//       width: '170',
//       checkarr:[
//         {
//           value:'1',
//           label:'1'
//         },
//         {
//           value:'2',
//           label:'2'
//         },
//         {
//           value:'3',
//           label:'3'
//         }
//       ],
//       fixed:true
//     },
//     {
//       prop: 'age',
//       label: '年龄',
//       type: 2,
//       values: '',
//       width: '120',
//       checkarr:[],
//       fixed:false,
//       isshowSummary:true
//     },
//     {
//       prop: 'time',
//       label: '时间',
//       type: 4,
//       values: '',
//       width: '260',
//       checkarr:[],
//       fixed:false
//     },
//     {
//       prop: 'name',
//       label: '收货人',
//       type: 2,
//       values: '',
//       width: '150',
//       checkarr:[],
//       fixed:false
//     },
//     {
//       prop: 'name',
//       label: '送货司机',
//       type: 2,
//       values: '',
//       width: '180',
//       checkarr:[],
//       fixed:false
//     },
//     {
//       prop: '',
//       label: '操作',
//       type: 5,
//       values: '',
//       width: '200',
//       checkarr:[],
//       fixed:'right'
//     },
//     // 更多列的配置...
//   ] as TableColumnType[]); // 将列配置应用到 TableColumnType 类型上
let shownm = ref(false);
function handleEdit(index: number, row: TableDataType) {
  console.log(index, row);
}
function inputchange(value,column:TableColumnType){
  if(typeof value =='string'){
    console.log(value,column)
    emit('inputTxt',value,column)
  }
}
function selectchange(value,column:TableColumnType){
  console.log(value,column)
  emit('selectCheck',value,column)
}
function timechange(value,column:TableColumnType){
  console.log(value,column)
  emit('timeCheck',value,column)
}
const handleSelectionChange=(param:TableDataType[])=>{
  console.log(param)
  emit('selection',param)
}
function inputclear(value,column:TableColumnType){
  console.log('',column)
  emit('inputTxt','',column)
}
function selectclear(value,column:TableColumnType){
  console.log('',column)
  emit('selectCheck','',column)
}
function timeclear(value,column:TableColumnType){
  console.log('',column)
  emit('timeCheck','',column)
}
function handleDelete(index: number, row: TableDataType) {
  console.log(index, row);
}
const getSummaries = (param: any) => {
  const { columns, data } = param;
  let newarr = [];
  let tji = 0;
  console.log(columns, data);
  columns.map((item, index) => {
    if (index == 0) {
      newarr[index] = '总计';
      return;
    }
    tji = 0;
    if (props.columnList[index]?.isshowSummary) {
      data.map(ite => {
        tji += Number(ite[props.columnList[index]?.prop]||0);
      });
      newarr[index] = tji;
      // shownm.value=true
    } else {
      newarr[index] = null;
    }
  });
  // console.log(columns)
  console.log(newarr);
  return newarr;
};
watchEffect(()=>{
  props.columnList.map(item => {
  if (item.isshowSummary) {
    shownm.value = true;
  }
});
})

</script>
<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>