pc_shop_admin/src/components/GlobalTable/index.vue

<template>
  <div class="table-container">
    <slot name="files"></slot>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      :row-key="rowKey"
      tooltip-effect="dark"
      style="width: 100%"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        background: '#fafafa',
        color: '#333',
        'font-weight': 700,
      }"
      :default-sort="{ prop: 'dec_code', order: 'descending' }"
      @selection-change="handleSelectionChange">
      <el-table-column
        v-if="selectionShow"
        type="selection"
        width="50"
        align="center"
        highlight-current-row
        fixed
        :reserve-selection="true"></el-table-column>
      <el-table-column
        v-if="serialShow"
        type="index"
        width="50"
        :label="$t('table_index')"></el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :align="item.align"
          v-if="!item.type"
          :key="item.prop"
          :prop="item.prop"
          :label="$t(item.label)"
          :formatter="item.formatter"
          :width="item.width"
          :min-width="item.minwidth"
          :sortable="item.sortable">
        </el-table-column>
        <el-table-column
          v-else
          :key="1 + item.prop"
          :prop="item.prop"
          :label="$t(item.label)"
          :formatter="item.formatter"
          :width="item.width"
          :sortable="item.sortable">
          <template slot-scope="{ row }">
            <!-- 图片 -->
            <el-image
              v-if="item.type == 'img'"
              :src="row[item.prop]"
              style="width: 80px; height: 80px" />
            <!-- 编辑输入框  -->
            <template v-else-if="item.type == 'input'">
              <el-input
                clearable
                v-model="row[item.prop]"
                class="edit-input"
                size="small"
                v-if="row.edit" />
              <span v-else>{{ row[item.prop] }}</span>
              <i
                class="iconfont icon-bianji"
                style="cursor: pointer"
                @click="toggleEdit(row)">
              </i>
            </template>
            <!-- 开关切换 -->
            <el-switch
              v-else-if="item.type == 'switch'"
              @change="toggleStatus(row)"
              v-model="row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="ON"
              inactive-text="OFF"
              :active-value="1"
              :inactive-value="0"></el-switch>
            <!-- popover -->
            <el-popover
              v-else-if="item.type == 'popover'"
              width="300"
              trigger="hover"
              :content="row[item.prop]">
              <div slot="reference" class="ellipsis">{{ row[item.prop] }}</div>
            </el-popover>
            <template v-else-if="item.type == 'formatType'">
              {{ row[item.prop] | formatFilters(item.filterData) }}
            </template>
            <template v-else-if="item.type == 'button'">
              <slot
                name="button"
                :row="row"></slot>
            </template>
          </template>
        </el-table-column>
      </template>
      <!--region 按钮操作组-->
      <el-table-column
        fixed="right"
        :label="$t('table_operation')"
        :width="operateWith"
        v-if="handleShow">
        <template slot-scope="{ row }">
          <slot
            name="operation"
            :row="row"></slot>
          <!-- <el-button @click="openDetail(3, row)" type="text" size="medium"
            >{{ $t('btn_edit') }}</el-button
          >
          <el-button
            type="text"
            size="medium"
            style="color: #ff0000"
            @click="deleteListOpt(row.id)"
            >{{ $t('btn_delete') }}</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'GlobalTable',
  filters: {
    formatFilters(val,filterData){
      return filterData[val];
    }
  },
  props: {
    tableData: Array,
    tableColumns: Array,
    listLoading: {
      type: Boolean,
      default: false,
    },
    rowKey: {
      type: String,
      default: 'id',
    },
    selectionShow: {
      type: Boolean,
      default: true,
    },
    serialShow: {
      type: Boolean,
      default: true,
    },
    handleShow: {
      type: Boolean,
      default: true,
    },
    operate: {
      // 按钮操作组
      type: Array,
      default: () => [],
    },
    operateWith: {
      type: String,
      default: '160',
    },
  },
  data() {
    return {}
  },
  methods: {
    // 修改input
    toggleEdit(row) {
      if (row.edit) {
        this.$emit('handleEditRank', row)
        // category
        //   .editRank({ id: row.id, rank: +row.rank })
        //   .then((response) => {});
      }
      row.edit = !row.edit
    },
    // 切换开关
    toggleStatus(row) {
      this.$emit('handleToggleStatus', row)
      // let status = row.status ? 1 : 0;
      // category
      //   .editStatus({ id: row.id, status })
      //   .then((response) => {
      //     this._recursiveSetStatus(row, "status", row.status);
      //   })
      //   .catch((err) => {
      //     row.status = !row.status;
      //   });
    },
    // 多行选中
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
  },
}
</script>

<style scoped>
.edit-input {
  display: inline-block;
  width: 70px;
}
.icon-bianji {
  vertical-align: middle;
  margin-left: 10px;
}
</style>