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-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span>
        <!-- 【可编辑】文本 -->
        <el-input 
          v-else-if="item.type == 'input'"
          v-model="scope.row[item.prop]" 
          :placeholder="item.label" 
          :disabled="item.disabled"
          :clearable="!item.noClear"
        />
        <!-- 【可编辑】字典选择 -->
        <el-select
          v-else-if="item.type == 'filterSelect'"
          v-model="scope.row[item.prop]"
          :filterable="!item.noSearch"
          placeholder="请选择"
          :disabled="item.disabled"
          :clearable="!item.noClear">
          <el-option
            v-for="(op,op_index) in item.options"
            :key="op_index"
            :label="op.label"
            :value="op.value"
          />
        </el-select>
        <!-- 【可编辑】时间 -->
        <el-date-picker
          v-else-if="item.type == 'datetimeInput'"
          v-model="scope.row[item.prop]"
          style="width:100%"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :clearable="!item.noClear"
          :disabled="item.disabled"
        />
        <!-- 【可编辑】数字 -->
        <el-input-number 
          v-else-if="item.type == 'numberInput'"
          v-model="scope.row[item.prop]" 
          :min="item.min"
          :max="item.max"
          :clearable="!item.noClear"
          :disabled="item.disabled"
        />
        <!-- 正常直接显示 -->
        <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"
          v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide"
          :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: 150
    },
    // 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'
    },
    // 是否为可编辑tabel
    isEditTable:{
      type: Boolean,
      default: false
    },
  })

  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>