QRAPI/Web/src/components/elTable/index.vue

<template>
  <el-table 
    ref="tableRef" 
    row-key="id" 
    :data="props.tableData" 
    :border="true"
    @sort-change="sortChange"
    @selection-change="tableSelectionHandle"
  >
    <!-- 多选框 -->
    <el-table-column 
      v-if="props.multipleTable"
      type="selection" 
      :fixed="'left'"
      width="55" 
    />
    <!-- 左侧操作列 -->
    <el-table-column 
      v-if="props.leftOperation && props.leftOperation.length > 0"
      :fixed="'left'"
      :width="props.leftOperationColumnWidth"
      label="操作"
      :align="'center'">
      <template #default="scope">
        <el-button
          v-for="(btn,index) in props.leftOperation"
          :key="index"
          :type="btn.type"
          :link="btn.link"
          @click="leftOperationHadel(btn,scope)"
        >{{btn.label}}</el-button>
      </template>
    </el-table-column>

    <!-- 数据列 -->
    <el-table-column
      v-for="(item, index) in props.tableColumns" 
      :key="index"
      :label="item.title"
      :prop="item.prop"
      :sortable="item.sortable || 'custom'"
      :fixed="item.fixed"
      :width="item.width || props.columnWidth"
      :align="item.align || props.columnAlign"
      :header-align="item.headerAlign || props.columnHeaderAlign">
      <template #default="scope">
        <!-- 时间格式 -->
        <span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
        <!-- 标签格式 -->
        <el-tag
          v-else-if="item.type == 'tagFilter'"
          :type="formatTableTagFilter('type',scope.row,item)"
        >
          {{ formatTableTagFilter('label',scope.row,item) }}
        </el-tag>
        <!-- 正常文本 -->
        <span v-else> {{ scope.row[item.prop] }} </span>
      </template>
    </el-table-column>

    <!-- 右侧操作列 -->
    <el-table-column 
      v-if="props.rightOperation && props.rightOperation.length > 0"
      v-auth-any="getShowRightOpera()"
      :fixed="'right'"
      :width="props.rightOperationColumnWidth"
      :align="'center'"
      label="操作">
      <template #default="scope">
        <el-button
          v-for="(btn,index) in props.rightOperation"
          :key="index"
          :type="btn.type"
          :link="btn.link"
          @click="rightOperationHadel(btn,scope)"
          v-auth="btn.auth"
        >{{btn.label}}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
  
<script setup>
  defineOptions({ name: 'elTable' })
  import { reactive, ref, onMounted } from 'vue'
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import { formatTimeStrToStr } from "@/utils/formatTime";
  
  const state = reactive({})

  const props = defineProps({
    // 多选
    multipleTable:{
      type: Boolean,
      default: false
    },
    // 左侧操作列
    leftOperation:{
      type: Object,
      default: null
    },
    // 左侧操作列宽度
    leftOperationColumnWidth:{
      type: Number,
      default: 120
    },
    // 右侧操作列
    rightOperation:{
      type: Object,
      default: null
    },
    // 右侧操作列宽度
    rightOperationColumnWidth:{
      type: Number,
      default: 120
    },
    // table数据
    tableData: {
      type: Object,
      default: []
    },
    // table表头
    tableColumns: {
      type: Object,
      default: []
    },
    // 表头宽度
    columnWidth:{
      type: Number,
      default: null
    },
    // 表头对齐
    columnHeaderAlign:{
      type: String,
      default: 'center'
    },
    // 表内容对齐
    columnAlign:{
      type: String,
      default: 'center'
    },
  })

  const emits = defineEmits([
    'sortChange',
    'leftOperationHadel',
    'rightOperationHadel',
    'tableSelectionHandle'
  ])

  // 多选
  function tableSelectionHandle (val){
    emits('tableSelectionHandle',val)
  }

  // 格式化时间
  function formatTableDate(time) {
    let _time = '-'
    if (time) { _time = formatTimeStrToStr(time) }
    return _time
  }
  
  // 格式化TagFilter
  function formatTableTagFilter(type,row,item){
    let _op = item.options.filter(op=>op.value == row[item.prop])
    if(!_op || _op.length <=0 || !_op[0][type]){
      if(type=='type'){return 'info'}
      else{return '--'}
    }else{
      return _op[0][type]
    }
  }

  
  //排序
  function sortChange(data) {
    emits('sortChange',data)
  }

  // 左侧操作列
  function leftOperationHadel(btn,scope) {
    emits('leftOperationHadel',btn,scope)
  }

  // 判断是否显示右侧操作权限
  function getShowRightOpera(){
    let _arr = []
    props.rightOperation.forEach(item=>{_arr.push(item.auth)})
    return _arr
  }

  // 右侧操作列
  function rightOperationHadel(btn,scope) {
    emits('rightOperationHadel',btn,scope)
  }
  
  onMounted(() => {})

</script>
  
<style></style>