hyp-front/src/components/CustomTable/CustomTable.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd(applyType)"
        >申请</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
<!--    表格部分-->
    <el-table v-loading="loading" :row-selection="true" :data="tableData" @select="handleSelectionChange">
      <!-- Table Columns -->
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :align="column.align" :width="column.width">
        <template v-if="column.type === 'date'" v-slot:default="scope">
          <span>{{ parseTime(scope.row[column.prop], '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
        <template v-else-if="column.slotName === 'customSlotName'" v-slot:default="scope">
          <dict-tag :options="dict.type.rew_apply_status" :value="scope.row[column.prop]"/>
        </template>
        <template v-else  v-slot:default="scope">
          <span>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

      <!-- Actions Column -->
      <el-table-column v-if="actions.length > 0" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-for="(action, index) in actions" :key="index" size="mini" type="text" :icon="action.icon" @click="action.handler(scope.row)">{{ action.text }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import {parseTime} from "@/utils/ruoyi";

export default {
  dicts: ['rew_apply_status'],
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    actions: {
      type: Array,
      default: () => []
    },
    // 查询参数
    queryParams:{
      type:Object,
      default:()=>{}
    },
    //显示搜索条件
    showSearch:{
      type: Boolean,
      default: true
    },
    applyType:{
      type:String,
      default:'',
    }
  },
  data(){
    return {

    }
  },
  mounted() {
  },
  methods: {
    parseTime,
    //父组件搜索方法
    getList(query){
      this.$emit('getList', query);
    },
    //父组件搜索方法
    handleAdd(applyType){
      this.$emit('handleAdd', applyType);
    },
    //父组件搜索方法
    handleQuery(query){
      this.$emit('handleQuery', query);
    },
    resetQuery(query){
      this.$emit('resetQuery', query);
    },
    handleSelectionChange(selection) {
      this.$emit('handleSelectionChange', selection);
    },
  }
}
</script>