el-table复选框显示选中顺序

需求：弹窗中的el-table复选框显示点击的先后顺序，并带回父组件.这里主要用到了handleSelectionChange给每一行追加选中序号，然后通过rowStyle实时改变行样式，传入选中序号这个变量给css，在 counter-reset: progress var(--content); content: counter(progress);中接收。

子组件弹窗：

<template>
  <hc-dialog
    title="选择内容"
    :visible="dialogShow"
    class="hc-table-dialog ny_pad"
    @close="closeDialog()"
    width="650px"
  >
        <hc-table
          :data="tableData"
          border
          height="250"
          fit
          ref="singleTable"
          highlight-current-row
          class="tableThirtyTwo"
          :cell-style="{ letterSpace: '8px' }"
          :row-style="rowStyle"
          :header-row-style="{ height: '40px' }"
          @selection-change="handleSelectionChange"
        >
          <hc-table-column
            type="selection"
            width="40"
            align="center"
            fixed
            label-class-name="DisabledSelection"
            ref="selection"
          >
          </hc-table-column>
          <hc-table-column
            prop="content"
            show-overflow-tooltip
            label="内容"
            min-width="100"
          >
          </hc-table-column>
        </hc-table>
   <div slot="footer" class="dialog-footer">
      <hc-button @click="closeDialog()" size="mini">取 消</hc-button>
      <hc-button type="primary" @click="selectInt" size="mini"
        >保 存</hc-button
      >
    </div>
  </hc-dialog>
</template>
<script>
import ApiSetting from "@/assets/js/interface";
export default {
  props: ["selectIdListP","dialogShow"],
  data() {
    return {
      tableData: [],
      selectIndex: "",
      selectIdList: [],
    };
  },
  created() {},
  mounted() {
      this.getList();
  },
  methods: {
    rowStyle(row) {
      return {
        height: "40px",
        "--content": row.row.checkedIndex ? row.row.checkedIndex : "",
      };
    },
    async getList() {
      let url = ApiSetting.getList;
      var params = {};
      let res = await this.$getInterfaceData(url, "GET", params);
      if (res.data.code == 0) {
        this.tableData = res.data.list;
        this.$nextTick(() => {
          if (this.selectIdListP.length) {
            let list = [];
            this.selectIdListP.forEach((i, idx) => {
              this.tableData.forEach((el) => {
                el.checkedIndex = "";
                if (i == el.id) {
                  el.checkedIndex = idx + 1;
                  list.push(el);
                }
              });
            });
            list.forEach((row) => {
              this.$refs.singleTable.toggleRowSelection(row, true);
            });
          }
        });
      } else {
        this.$message.warning(res.data.msg);
      }
    },
    handleSelectionChange(val) {
      this.tableData.forEach((el) => {
        el.checkedIndex = "";
        val.forEach((i, idx) => {
          if (i.id == el.id) {
            el.checkedIndex = idx + 1;
            i.checkedIndex = idx + 1;
          }
        });
      });
      this.selectIdList = val;
    },
    //确定按钮
    selectInt() {
      if (this.selectIdList.length < 0) {
        this.$message.warning("请选择内容！");
        return false;
      }
      this.$parent.getInt(this.selectIdList);
      this.$emit("update:dialogShow", false);
    },
    closeDialog() {
      this.$emit("update:dialogShow", false);
    },
  },
};
</script>
<style scoped lang="less">
/deep/.el-table-column--selection .el-checkbox__input.is-checked {
  line-height: 16px;
}
/deep/.el-table-column--selection .el-checkbox__inner {
  width: 17px;
  height: 16px;
}
.el-table /deep/ .DisabledSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  &::after {
    display: flex;
    justify-content: center;
    align-items: start;
    color: #ffffff;
    font-size: 12px;
    border: none;
    height: 0;
    transform: translate(1px, -4px);
    counter-reset: progress var(--content);
    content: counter(progress);
  }
}
/deep/.el-table__row
  .is-center.el-table-column--selection.el-table__cell::before {
  content: var(--content);
  color: #ffffff;
  font-size: 14px;
  border: none;
  height: 0;
  transform: translate(-2px, -6px);
}
</style>

父组件

<honorInt
      v-if="dialogShow"
      :dialogShow.sync="dialogShow"
      :getInt="getInt"
      :selectIdListP.sync="selectIdListP"
    ></honorInt>
    
     getInt(list) {
      let arrLabel = [];
      let arrId = [];
      list &&
        list.forEach((i) => {
          arrLabel.push(`${i.checkedIndex}、${i.content}`);
          arrId.push(i.id);
        });
      this.addForm.labels = arrLabel.join("；");
      this.addForm.ids = arrId.join(",");
      this.selectIdListP = arrId;
    },

效果图：

图上序号就是点击顺序。