file_safe_admin/src/components/TableView/index.vue

<template>
  <div class="TableView">
    <el-table
      class="elTable"
      ref="dataTable"
      :data="tableData"
      border
      size="mini"
      highlight-current-row
      @selection-change="selectLine"
      @current-change="handleCurrentChange"
      @sort-change="changeSort"
      @row-dblclick="rowdblclick"
      :header-row-style="{ height: +this.GLOBAL.MAX_HEADER_H + 'px' }"
      :header-cell-style="{
        padding: '0px',
        background: '#f6f6f6',
        color: '#6c6c6c'
      }"
      :row-style="{ height: +this.GLOBAL.MAX_ROW_H + 'px' }"
      :cell-style="{ padding: '0px' }"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!--  :height="height" 多选框 -->

      <el-table-column
        v-if="showSelect"
        type="selection"
        width="50"
        align="center"
        :selectable="checkboxT"
      ></el-table-column>

      <el-table-column type="expand" v-if="isExpand">
        <template slot-scope="scope">
          <slot name="expand" :data="scope" />
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="70px"
        align="center"
        v-if="isSerial"
      >
        <template slot-scope="scope">
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <!-- 文本数据渲染 -->
      <template v-for="item in tableHead">
        <!--自定义列 操作模块   fixed="right" -->
        <el-table-column
          v-if="item.columnType == 'operation' && item.isShow"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align || 'center'"
          fixed="right"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-table-column>

        <!--自定义列 :sortable="sortable ? sortable :'custom' "-->
        <el-table-column
          :show-overflow-tooltip="item.tooltip == null ? true : item.tooltip"
          v-else-if="item.columnType == 'slot' && item.isShow"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align ? item.align : 'center'"
          :sortable="item.sortable == null ? false : item.sortable"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-table-column>

        <!--普通文本 :sort-orders="['ascending', 'descending']" -->
        <el-table-column
          :show-overflow-tooltip="item.tooltip == null ? true : item.tooltip"
          v-else-if="item.isShow && !item.type && !item.columnType"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align ? item.align : 'center'"
          :sortable="item.sortable == null ? false : item.sortable"
        ></el-table-column>

        <!--根据不同类型显示不同的输入框 可以是下拉选择 /按钮 /输入框 还可以自己定义更多 -->
        <el-table-column
          v-else-if="item.type && item.isShow && !item.columnType"
          :label="item.label"
          :key="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align ? item.align : 'center'"
          :sortable="item.sortable == null ? false : item.sortable"
        >
          <template slot-scope="scope">
            <el-select
              v-if="item.type == 'select'"
              size="mini"
              v-model="scope.row[item.prop]"
              @change="handleEdit(scope.$index, scope.row)"
              placeholder="请选择"
              value
            >
              <el-option
                v-for="option in item.data"
                :disabled="disabled"
                :value="option.name"
                :key="option.name"
                :label="option.name"
              />
            </el-select>
            <el-button
              v-else-if="item.type == 'btn'"
              :disabled="disabled"
              @click="onSelected(scope.$index, scope.row)"
              type="primary"
              size="mini"
              >{{ item.text }}</el-button
            >
            <el-input
              v-else-if="item.type == 'text'"
              size="mini"
              :disabled="item.disabled || disabled"
              v-model="scope.row[item.prop]"
              placeholder="请输入"
              @change="handleEdit(scope.$index, scope.row)"
            />

            <el-input
              v-only-number="{ min: 0, max: GLOBAL.MAX_PRICE, precision: 2 }"
              v-else-if="item.type == 'money'"
              size="mini"
              :disabled="item.disabled || disabled"
              v-model="scope.row[item.prop]"
              placeholder="请输入"
              @change="handleEdit(scope.$index, scope.row)"
            />

            <el-input-number
              v-onlyInt
              size="mini"
              v-else-if="item.type === 'number'"
              v-model="scope.row[item.prop]"
              :min="0"
              label="排序编号"
              @change="handleEdit(scope.$index, scope.row)"
            ></el-input-number>
            <!-- <span>{{scope.row[item.prop]}}</span> -->
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div class="paginationInfo" v-show="pageShow">
      <pagination
        ref="p"
        :page-size="pageRequest.pageSize"
        :total="total"
        :current-page="pageRequest.pageIndex"
        @changePage="changePage"
        @changePageSize="changePageSize"
      ></pagination>
      <div class="pool">{{ totalizeStr }}</div>
    </div>
  </div>
</template>

<script>
import pagination from '@/components/pagination'
export default {
  name: 'e-table',
  components: { pagination },
  /**
   * @name:
   * @test: test font
   * @msg:
   * @param {
   *  接收参数:
   *      tableHeadConfig 列的名称、接收值     |     Array
   *        label         列的名称                      |     String
   *        prop          列的对应值                    |     String
   *        columnType    定义当前列为插槽    |   slot   |     String
   *        slotName      定义当前列插槽的名字           |     String
   *        width         定义当前列的宽度               |     String
   *        sortable      列的排序
   *        isTime        列是否是时间
   * tooltip :false
   *
   *  示例：配置
   *      tableHeadConfig:[
   *              {
   *                label       : "缩略图",
   *                prop       : "skuName",
   *                columnType  : "slot",
   *                slotName    : "thumbnail",
   *                width       : 240
   *              }
   *            ]
   *
   *      tableLoadData     异步获取的table文本数据信息
   *      align             表格单元格内容排列顺序      left|center|right
   *      showSelect         表格是否可多选
   *      height            表格默认撑开高度（未用）
   *      heightOffset      表格最大高度偏移量
   *      pageShow   显示分页（默认显示）
   *      pageSize 分页》 页条
   *      total  分页》 总数
   *      currentPage 分页 》当前页码
   *      totalizeStr  合计说明处理
   *  事件：
   *      获取当前选中行
   *      调用页面用  @selectLine="xxx" 进行监听处理
   *      从后台获取数据,重新排序   changeSort
   *      双击行事件rowdblclick
   *      分页获取更改的页码  changePage
   *      分页获取更改条数/页  changePageSize
   * }
   * @return:
   */
  props: {
    tableHeadConfig: {
      type: Array,
      default: () => {
        return [
          {
            label: 'skuId',
            prop: 'skuId'
          },
          {
            label: '操作',
            columnType: 'slot',
            slotName: 'operation'
          }
        ]
      }
    },
    tableLoadData: {
      type: Array,
      default: () => {
        return []
      }
    },
    align: {
      type: String,
      default: 'center'
    },
    isSerial: {
      type: Boolean,
      default: true
    },
    isExpand: {
      type: Boolean,
      default: false
    },
    sortable: {
      type: Boolean,
      default: false
    },
    showSelect: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 50
    },
    heightOffset: {
      type: [Number, String],
      default: 150
    },
    isTime: {
      type: Boolean,
      default: false
    },
    pageShow: {
      type: Boolean,
      default: true
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    pageSize: {
      type: [Number, String],
      default: 10
    },
    total: {
      type: [Number, String],
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    totalizeStr: {
      type: String,
      default: ''
    },
    selectQuantity: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      selectList: [],
      disabled: false,
      // 分页信息
      pageRequest: {
        pageIndex: 1,
        pageSize: 10,
        sort: null,
        order: null
      }
    }
  },
  computed: {
    tableData() {
      return this.tableLoadData
    },
    tableHead() {
      return this.tableHeadConfig
    }
  },
  created() {},
  mounted() {},
  methods: {
    checkboxT(row, index) {
      return this.isDisabled
    },

    // 分页查询
    getPageList() {
      this.$emit('getPageList', this.pageRequest)
    },

    // 从后台获取数据,重新排序
    changeSort(val) {
      if (val) {
        this.pageRequest.pageIndex = 1
        this.pageRequest.sort = val.prop
        this.pageRequest.order = val.order
        this.getPageList()
        // console.log("排序的参数")
        this.$emit('changeSort', { sort: val.prop, order: val.order })
      }
    },
    // 分页获取更改的页码
    changePage(val) {
      this.pageRequest.pageIndex = val
      this.getPageList()
      this.$emit('changePage', val)
    },
    // 分页获取更改条数/页
    changePageSize(val) {
      this.pageRequest.pageSize = val
      this.pageRequest.pageIndex = 1
      this.getPageList()
      this.$emit('changePageSize', val)
    },

    //双击行事件
    rowdblclick(row, column) {
      if (row) {
        // this.$emit("rowdblclick", row);
      }
    },
    // 选择切换
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    //选择
    selectLine(val) {
      this.selectList = val
      if (this.selectQuantity > 0) {
        if (this.selectList.length > this.selectQuantity) {
          // this.$refs.dataTable.clearSelection();
          // this.$refs.dataTable.toggleRowSelection(val[val.length-1]) ;

          // 截取前20位
          this.selectList = val.slice(0, this.selectQuantity)
          // 截取20位之后的数组  禁止选中
          let tempArr = val.slice(this.selectQuantity)
          if (tempArr.length !== 0) {
            tempArr.forEach(ele => {
              this.$refs.dataTable.toggleRowSelection(ele, false)
            })
          }
          this.$message.closeAll()
          this.$message.warning('只能请选择' + this.selectQuantity + '个')
        }
      }

      this.$emit('selectLine', this.selectList)

      // if (
      //   this.$refs.dataTable.selection &&
      //   this.$refs.dataTable.selection.length > 0
      // ) {
      //   this.$emit('selectLine', this.$refs.dataTable.selection);
      // }
    },

    handleEdit(index, row) {
      this.$emit('handleEdit', { index: index, row: row })
    },
    onSelected: function (index, row) {
      this.$emit('onTableBtn', { index: index, row: row })
    }
    // this.$refs.dataTable.doLayout();
  }
}
</script>
<style lang="less" scoped>
.TableView .elTable {
  border: 1px solid #4bd198 !important;
}
.TableView .el-link {
  font-size: 12px !important;
  margin: 0 2px;
}
.TableView .el-table::before {
  height: 0 !important;
}
.TableView .elTable th {
  background: #f2f2f2 !important;
}
.TableView .elTable .cell {
  line-height: 40px !important;
}
.TableView .el-table__fixed-right::before,
.TableView .el-table__fixed::before {
  height: 0 !important;
}
.paginationInfo {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e6e6e6;
  padding: 7px 0;
  margin-top: 10px;
  .pool {
    padding: 10px 10px;
    color: #6c6c6c;
    text-align: right;
  }
}
/*当表格选中的时候 会自动添加  .current-row  这些代码很好理解了*/
.tb-edit .el-input,
.tb-edit .el-input-number,
.tb-edit .el-select {
  display: none;
}
.tb-edit .current-row .el-input.el-input-number,
.tb-edit .current-row .el-select {
  display: block;
}
.tb-edit .current-row .el-input .el-input-number + span,
.tb-edit .current-row .el-select + span {
  display: none;
}
</style>