spfm-market-front/src/pages/main/leader/components/formTrace.vue

<template>
  <div class="container">
    <div class="table">
      <slot :name="list.name"></slot>
      <el-table
        ref="table"
        style="width: 100%"
        :data="list.data"
        row-key="id"
        @row-click="getRowData"
        @selection-change="selectionChange"
        :cell-style="columnbackgroundStyle"
        empty-text="暂无数据"
        @cell-click="getRowList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- 是否多选 -->
        <el-table-column
          v-if="list.isSelection"
          :selecttable="list"
          type="selection"
          :width="100"
          align="center"
        />

        <!-- 是否需要序号 -->
        <el-table-column
          v-if="list.isIndex"
          type="index"
          label="序号"
          width="55"
          align="center"
        />
        <template v-for="item in list.titledata">
          <el-table-column
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
            show-overflow-tooltip
            :width="item.width || 100"
          />
        </template>
        <!-- 操作列 -->
        <el-table-column
          v-if="list.isOperation"
          v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
          style="margin-right: 20px"
          class-name="handle-td"
          label-class-name="tc"
          :label="list.operation.label"
          align="center"
        >
          <!-- UI统一一排放3个，4个以上出现更多 -->
          <template slot-scope="scope">
            <!-- 三个一排的情况，去掉隐藏的按钮后的长度 -->
            <template v-if="list.operation.data.length > 0">
              <div class="btn">
                <div v-for="item in list.operation.data" :key="item.label">
                  <template v-if="item.type !== 'icon'">
                    <el-button
                      v-bind="item"
                      :type="item.type ? item.type : ''"
                      size="mini"
                      @click.native.prevent="
                        item.handleRow(scope.$index, scope.row, item.label)
                      "
                    >
                      {{ item.label }}
                    </el-button>
                  </template>
                  <template v-else>
                    <i
                      :class="[icon, item.icon]"
                      v-bind="item"
                      @click="
                        item.handleRow(scope.$index, scope.row, item.label)
                      "
                    />
                  </template>
                </div>
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          style="
            display: flex;
            flex-direction: row-reverse;
            background-color: #fff;
          "
          v-if="list.pageData.total > 0"
          :current-page.sync="page"
          :page-sizes="list.pageData.pageSizes ? list.pageData.pageSizes : [10]"
          :page-size="list.pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.pageData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
    };
  },
  props: {
    //  表格数据和表格部分属性的对象
    // eslint-disable-next-line vue/require-default-prop
    list: {
      type: Object,
    },
  },
  created() {
    console.log(this.list);
  },
  mounted() {},
  methods: {
    columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
      if (column.type == "default") {
        if (column.label === "需求名称") {
          return "color:#0682CD;";
        }
      }
      //   if (columnIndex == 1) {
      // 	//让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
      //     return 'color:#0682CD;'
      // }
    },
    selectionChange(val) {
      //多选数字回调
      this.$emit("num", val);
    },
    handleAdd(name) {
      this.$emit("toolMsg", name);
    },
    handleRow(index, row, lable) {},
    handleSizeChange(val) {
      this.$emit("changeSize", val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.$emit("changeNum", val);
      console.log(`当前页: ${val}`);
    },
    // 点击行即可选中
    getRowData(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    getRowList(row, column, event, cell) {
      this.$emit("clickDemand", column.label, row);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  margin-bottom: 4%;
  .table {
    flex: 1;
    position: relative;
    ::v-deep.el-table {
      position: absolute;
      overflow-y: auto;
    }
  }
}
</style>