<template>
  <div>
    <el-table
      :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      border
      :row-key="getRowKeys"
      @selection-change="baseSensitivity_OnSelecrt"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column
        prop="Factor_Type"
        label="因子类型"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.Factor_Type" placeholder="请选择因子类型">
            <!-- <el-option key="0" label="间接因子" value="0" />
            <el-option key="1" label="直接因子" value="1" /> -->
            <el-option
              v-for="item in displayOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
    </el-table>
    <div style="margin-top: 0.2rem; margin-left: 0.2rem">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6, 8, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseensitivityAllOnSelecrList: [],
      currentPage: 1,
      currentIndex: "",
      pagesize: 7,
      tableData: [],
      displayOptions: [
        {
          label: "间接因子",
        },
        {
          label: "直接因子",
        },
      ],
    };
  },
  created() {
    this.getInit();
  },

  methods: {
    getRowKeys(row) {
      return row.id;
    },
    // 添加工序表格多选事件  list：选中的数据列表
    baseSensitivity_OnSelecrt(list) {
      this.baseensitivityAllOnSelecrList = list;
    },
    getInit() {
      this.tableData = [
        {
          id: 1,
          name: "张三1",
          amount1: "6",
        },
        {
          id: 2,
          name: "张三2",
          amount1: "2",
        },
        {
          id: 3,
          name: "张三3",
          amount1: "4",
        },
        {
          id: 4,
          name: "张三4",
          amount1: "4",
        },
        {
          id: 5,
          name: "张三5",
          amount1: "5",
        },
        {
          id: 6,
          name: "张三6",
          amount1: "6",
        },
        {
          id: 7,
          name: "张三7",
          amount1: "2",
        },
        {
          id: 8,
          name: "张三8",
          amount1: "4",
        },
        {
          id: 9,
          name: "张三9",
          amount1: "4",
        },
        {
          id: 10,
          name: "张三10",
          amount1: "5",
        },
        {
          id: 11,
          name: "张三11",
          amount1: "6",
        },
        {
          id: 12,
          name: "张三12",
          amount1: "2",
        },
        {
          id: 13,
          name: "张三13",
          amount1: "4",
        },
        {
          id: 14,
          name: "张三14",
          amount1: "4",
        },
        {
          id: 15,
          name: "张三15",
          amount1: "5",
        },
        {
          id: 16,
          name: "张三16",
          amount1: "6",
        },
        {
          id: 17,
          name: "张三17",
          amount1: "2",
        },
        {
          id: 18,
          name: "张三18",
          amount1: "4",
        },
        {
          id: 19,
          name: "张三19",
          amount1: "4",
        },
        {
          id: 20,
          name: "张三20",
          amount1: "5",
        },
      ];
    },

    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-pager li.active {
  background-color: var(--primary, #3461ff);
  color: #fff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: #3461ff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  color: #3461ff;
}
::v-deep .el-select-dropdown__item .selected {
  color: #3461ff !important;
}

/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08c0b9;
  color: #fff;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #08c0b9;
  color: #fff;
}
/*带背景的分页按钮背景色end*/

/*不带背景的分页按钮背景色begin*/
.el-pager li.active {
  color: #08c0b9;
  cursor: default;
}
.el-pagination .el-pager li:hover {
  color: #08c0b9;
}
.el-pagination .el-pager li:not(.disabled):hover {
  color: #08c0b9;
}
/*不带背景的分页按钮背景色end*/
</style>