Typescript + vue3 二次封装el-table多级表头总是报这个问题？

问题描述：

报错截图

<el-table :data="tableData" highlight-current-row @cell-click="handleCellClick">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template #default="scope">
          <el-input
            v-if="item.edit"
            size="small"
            ref="tableInput"
            v-model="scope.row[item.prop]"
            @blur="removeClass"
            @change="handleEdit()"
          />
          <span>{{ scope.row[item.prop] }}</span>
        </template>
        <el-table-column
          v-for="(itemchild, indexchild) in item.children"
          :key="indexchild"
          :prop="itemchild.prop"
          :label="itemchild.label"
          :width="itemchild.width"
        >
          <template #default="scope">
            <el-input
              v-if="itemchild.edit"
              size="small"
              ref="tableInput"
              v-model="scope.row[itemchild.prop]"
              @blur="removeClass"
              @change="handleEdit()"
            />
            <span>{{ scope.row[itemchild.prop] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

js

const columns = [
  { label: '项目名称', prop: 'itemName', width: '300', key: '100' },
  { label: '项目编码', prop: 'itemCode', width: '150', key: '200' },
  { label: '单位', prop: 'compName', width: '150', key: '300', edit: true },
  {
    label: '项目',
    prop: '',
    width: '450',
    align: 'center',
    key: '400',
    children: [
      { label: '篮球', prop: 'staff', width: '150', key: '401', edit: true },
      { label: '足球', prop: 'material', width: '150', key: '402', edit: true },
      { label: '排球', prop: 'site', width: '150', key: '403' },
    ],
  },
];
const tableData = [
  {
    itemName: '爱仕达多撒',
    itemCode: '13511576982',
    compName: '北京',
    staff: '100',
    material: '84547',
    site: '6544',
    sort: 1,
  },
];
const handleEdit = () => {};
const handleCellClick = (row: any, column: any, cell: any) => {
  for (let i = 0; i < document.getElementsByClassName('current-cell').length; i++) {
    document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
  }
  cell.classList.add('current-cell');
};
const removeClass = () => {
  document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
};

这是个多级表头二次封装，但是总是报这个错，大佬帮忙看看怎么写就对了。

第 1 个答案：

你这上面已经有个默认插槽了，下面是干啥的？

背景：最近在学习一个全栈项目，但是我对前端不太了解，所以出现了很多菜鸡问题，向大家请教。问题：浏览器控制台报错：Uncaught (in pr ...