给table表格序号添加子集（主要通过render函数的使用）

<template>
  <div class="meal-manage">
    <div style="display: flex">
      <dataType @onSelect="onSelect" :can-edit="false"></dataType>
      <div style="width: 'calc(100% - 160px)'">
        <el-card style="margin-bottom:10px">
          <div
              style="
                height: 50px;
                min-width: 1300px;
                display: flex;
                flex-warp: warp;
                overflow: hidden;
              "
            >
             <!-- border-bottom: 1px solid #d7dde4; -->
              <div v-for="(tab, index) in tabList" :key="index">
                <cusButton
                  @onClick="tabsClick(tab, index)"
                  class="mr_10 mb_20"
                  :class="{ liBackground: changeLeftBackground == index }"
                  style="height:40px; warp;overflow:hidden;"
                  >{{ tab.label }}</cusButton
                >
              </div>
            </div>
        </el-card>
        <cus-card
          :showTitle="false"
          :customStyle="{ width: '100%' }"
        >
          <div slot="header">
            <div
              style="
                padding: 20px 0 5px 0;
                display: flex;
                justify-content: flex-end;
                box-sizing: border-box;
              "
            >
              <Form
                :model="form"
                :label-width="80"
                @keydown.native.enter.prevent="onInit"
              >
                <FormItem label="数据类型" class="mr_20 mb_20">
                  <el-input
                    v-model="dataTypes"
                    placeholder="请输入数据类型"
                    style="width=200px; height= 40px; outline: none;"
                  ></el-input>
                </FormItem>
                <FormItem label="筛选时间" class="mr_10 mb_20">
                  <DatePicker
                    type="datetime"
                    @on-change ="eventTime"
                    format= "yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择时间"
                    style="width: 200px"
                  ></DatePicker>
                  至
                  <DatePicker
                    type="datetime"
                    @on-change ="eventTimes"
                    format= "yyyy-MM-dd 23:59:00"
                    placeholder="请选择时间"
                    style="width: 200px"
                  ></DatePicker>
                </FormItem>
                <cusButton class="mr_10 mb_20" type="primary" @onClick="onInit"
                  >查询</cusButton
                >
              </Form>
            </div>
          </div>
          <Table
            border
            :columns="columns"
            :data="data"
            row-key="id"
            :size="vuex_config.tableSize"
            class="taskdata"
          >
            <template slot-scope="{ row }" slot="operation">
              <!-- <div class="flex">
              <cus-button
                type="text"
                size="small"
                :style="{ color: '#1E6FFF', padding: '0 8px' }"
                @onClick="onDetails(row)"
              >
                查看数据
              </cus-button>
            </div> -->
            </template>
            <template slot-scope="{ row, index }" slot="sn">
              <div class="info">
                <div :key="index" class="info-section-item">
                  <Tag
                    v-if="row.status === 0"
                    style="width: 60px; height: 25px; line-height: 25px"
                    color="error"
                    >已发布</Tag
                  >
                  <Tag
                    v-if="row.status === 1"
                    style="width: 60px; height: 25px; line-height: 25px"
                    color="primary"
                    >执行中</Tag
                  >
                  <Tag
                    v-if="row.status === 2 || row.isUse === 0"
                    style="width: 60px; height: 25px; line-height: 25px"
                    >已完成</Tag
                  >
                </div>
              </div>
            </template>
            <template slot-scope="{ row, index }" slot="gmtCreateTime">
              {{ row.createTime | formatTime("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </Table>
          <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page
            :data="pages"
            class="mt_10"
            @pageChange="getSysjobListApi"
          ></cus-page>
        </div>
        </cus-card>
      </div>
    </div>
    <cus-footer></cus-footer>
    <!-- <addTaskModal ref="addTaskModal"></addTaskModal> -->
  </div>
</template>

<script>
import { getSysjobList } from "@/api/business/manager";
import { deviceState } from "@/config/dropdown";
import dataType from "./components/dataType";
// import addTaskModal from "./components/addTaskModal";

export default {
  components: { dataType },
  name: "foodNutritionManage",
  data() {
    return {
      deviceState: deviceState,
      changeLeftBackground: "0",
      form: {
        loading: false,
        createTime: "",
        dataId: "",
        dataType: "",
        jobId: "",
        jobType: "",
        jobName: "",
        remark: "",
        serialNos: "",
        deviceName: "",
        serialNumber: "",
        updateTime: "",
        updateBy: "",
        dataIn: "",
        dataName: "",
        direction: "数据流入",
        operation: "查看数据",
        isUse: 0,
      },
      data: [],
      dataTypes:'',
      startTime: "",
      endTime: "",
      selectVal: {},
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      tabList: [],
    };
  },
  computed: {
    columns() {
      let columns = [
        {
          title: "序号",
          width: 70,
          // type: "index",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    textAlign: "center",
                  },
                },
                !params.row.children
                  ? params.row.indexFlag + " - " + (params.row._index + 1)
                  : params.row._index + 1
              ),
            ]);
          },
        },
        {
          title: "任务名称",
          minWidth: 180,
          key: "jobName",
          align: "center",
        },
        {
          title: "任务类型",
          minWidth: 140,
          key: "jobType",
          align: "center",
        },
        {
          title: "数据来源",
          minWidth: 140,
          key: "dataIn",
          align: "center",
        },
        {
          title: "数据类型",
          minWidth: 140,
          key: "dataType",
          align: "center",
        },
        {
          title: "数据流转方向",
          minWidth: 130,
          key: "direction",
          align: "center",
        },
        {
          title: "系统终端名称",
          minWidth: 130,
          key: "deviceName",
          align: "center",
        },
        {
          title: "状态",
          minWidth: 130,
          slot: "sn",
          align: "center",
        },
        {
          title: "时间",
          minWidth: 150,
          slot: "gmtCreateTime",
          align: "center",
        },
        {
          title: "操作",
          width: 180,
          tree: true,
          fixed: "right",
          key: "operation",
          align: "center",
        },
      ];
      return columns;
    },
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getSysjobListApi();
    },
    onSelect(val) {
      this.tabList = [];
      val.children.map((element) => {
        element.label = element.dataName;
        element.name = element.id;
        this.tabList.push(element);
      });
      this.tabsClick(this.tabList[0]);
      this.changeLeftBackground = 0;
    },
    tabsClick(date, index) {
      this.changeLeftBackground = index;
      this.form.dataId = date.name;
      this.form.dataIn = date.dataIn;
      this.form.dataName = date.dataName;
      this.dataTypes ='';
      this.startTime= '';
      this.endTime= '';
      this.getSysjobListApi();
    },
    // 获取任务列表
    getSysjobListApi() {
      this.data = [];
      this.form.loading = true;
      return new Promise((resolve) => {
        getSysjobList({
          pageNum: this.pages.page,
          pageSize: this.pages.pageSize,
          dataId: this.form.dataId,
          dataType: this.dataTypes,
          startTime: this.startTime,
          endTime: this.endTime
        }).then((res) => {
          if (res.retCode === 2000) {
            console.log(res);
            res.data.records.forEach((item, index)=>{
              item.operation= this.form.operation;
              item.direction = this.form.direction;
              item.dataIn = this.form.dataIn;
              item.isUse = this.form.isUse;
              item.indexFlag= index + 1;
              item.status ='';
              if (item.children) {
                item.children.forEach((ite)=>{
                  ite.dataIn = this.form.dataIn;
                  ite.indexFlag = index + 1;
                  ite.direction ="数据输出"
                })
              }
              this.data.push(item)
            })

            // let arr = res.data;
            // let date = [];
            // Object.keys(arr).forEach((v, index) => {
            //   date = arr[v];
            //   this.haveChildren(date, index);
            //   let obj = {
            //     jobName: this.form.jobName,
            //     jobType: this.form.jobType,
            //     dataType: this.form.dataType,
            //     dataIn: this.form.dataIn,
            //     createTime: this.form.createTime,
            //     operation: this.form.operation,
            //     direction: "数据流入",
            //     isUse: this.form.isUse,
            //     id: v,
            //     children: date,
            //     indexFlag: index + 1,
            //   };
            //   this.data.push(obj);
            // });
            this.pages.pageTotal = res.data.total;
            console.log(this.pages.pageTotal)
            resolve();
          }
        });
      });
    },
    // haveChildren(v, index) {
    //   v.forEach((item) => {
    //     item.dataIn = this.form.dataIn;
    //     item.dataName = this.form.dataName;
    //     item.direction = this.form.direction;
    //     item.indexFlag = index + 1;
    //     this.form.jobName = item.jobName;
    //     this.form.createTime = item.createTime;
    //     this.form.jobType = item.jobType;
    //     this.form.dataType = item.dataType;
    //   });
    // },
    eventTime(val) {
      this.startTime = val;
    },
    eventTimes(va) {
      this.endTime = va;
    }
  },
};
</script>

<style scoped lang="scss">
.info {
  display: flex;
  flex-direction: column;

  &-section {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    &-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;
    }
  }
}
.liBackground {
  background: #006acc;
  color: #fff;
}
</style>