profitManage/src/components/table/index.vue

<template>
    <div>
        <!--  表格头部按钮  -->
        <el-row :gutter="10" class="mb8">
            <template v-if="config && config.tableButton && config.tableButton.top">
              <el-col :span="1.5" v-for="item of config.tableButton.top">
                <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
              </el-col>
            </template>
            <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" :columns="columns"></right-toolbar>
        </el-row>
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableList" ref="selChangeList" highlight-selection-row @selection-change="handleSelectionChange">
            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed type="selection" width="55" align="center" />
            <template v-for="(column, key, index) of columns">
                <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="center" :show-overflow-tooltip="true">
                    <!--  插槽 自定义列表表头数据格式  -->
                  <template #header v-if="column && column.slotHeaderName">
                    <span>{{column.label}}</span>
                    <el-tooltip trigger="click" effect="dark" placement="top">
                      <template #content>{{column.slotHeaderName}}</template>
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </template>
                    <!--  插槽 自定义列表内数据格式  -->
                    <template #default="scope" v-if="column && column.slotName">
                        <!-- 传递行数据、行索引等信息到父组件的插槽 -->
                        <slot
                            :name="column.slotName"
                            :valueKey="key"
                            :row="scope.row"
                            :rowIndex="scope.$index"
                            :column="column"
                            :scope="scope"
                        ></slot>
                    </template>
                </el-table-column>
            </template>
            <!--  表格行内按钮   -->
            <el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="config.tableButton.line.length * 60 + `px`" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <template v-for="item of config.tableButton.line">
                    <el-tooltip v-if="item && item.content" :content="item.content" placement="top">
                      <el-button size="mini" link :type="item.type" :icon="item.icon" v-show="scope.row[item.showName] === item.showVal" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
                    </el-tooltip>
                  </template>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="queryParams.total > 0" :total="queryParams.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="renderList" />
    </div>
</template>

<script setup>
    export default {
      name: 'table-list',
      props: {
          tableList: {
              type: Array,
              default: () => []
          },
          columns: {
              type: Object,
              default: () => {}
          },
          queryParams: {
              type: Object,
              default: {
                  total: 0,
                  pageNum: 1,
                  pageSize: 10,
              }
          },
          config: {
              type: Object,
              default: () => ({
                colHiddenCheck: false,
                colTopHiddenIcon: false
              })
          }
      },
      data() {
        return {
          loading: false,
          showSearch: true,
          ids: [],
          selectList: [],
          isProcessing: false,  // 防止事件循环的标志位
        }
      },
      // 监听showSearch的变化，并且把变化后的值传给父组件
      watch: {
        showSearch: {
          handler(val) {
            this.$emit('value-change', val)
          }
        }
      },
      methods: {
        // 所有方法都抛出到父组件里去
        handleClick(item, row) {
          this.$emit("fnClick", item, row, this.ids, this.selectList);
        },

        /** 多选框选中数据 */
        handleSelectionChange(selection) {
          if (this.config && this.config['tableKey']) {
            this.selectList = [];
            this.ids = [];
            if (this.isProcessing) return;
            this.isProcessing = true;
            // 当选中行有关联值时，默认把所关联的的行选中
            selection.forEach(res => {
              if (res && res.relevance) {
                let selArr = [res];
                Object.keys(res.relevance).forEach(item => {
                  res.relevance[item].forEach(val => {
                    this.tableList.some(tabVal => {
                      if (tabVal[item] === val) {
                        selArr.push(tabVal);
                        return true;
                      }
                    });
                  });
                });
                this.selectList = this.selectList.concat(selArr);
                this.ids = this.ids.concat(selArr.map(item => item.id));
              } else {
                if (!this.ids.includes(res.id)) {
                  this.selectList = this.selectList.concat(res);
                  this.ids = this.ids.concat(res.id);
                }
              }
              this.isProcessing = false;
            });
            this.selectList.forEach(val => {
              this.$refs.selChangeList.toggleRowSelection(val,true);
            });
          } else {
            this.selectList = selection;
            this.ids = selection.map(item => item.id);
          }
        },
        // 提供给父组件调用的方法：返回当前表格的选中数据 资源监控策略和资源监控模块使用
        getSelectedData() {
          return {
            tableKey: this.config.tableKey, // 表格唯一标识
            data: [...this.selectList] // 选中的数据
          };
        },
        renderList() {
          this.$emit("fnRenderList");
        },
      }
    }
</script>