vue3+ts表格插槽代码总报红

vue3+ts表格插槽代码总报红，但是不影响功能

请问需要怎么去掉这个报红

使用any类型中转一下，修改

handleUpdate((scope as any).row)
handleDelete((scope as any).row)

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7459911
你也可以参考下这篇文章：vue3+ts 实际开发中如何书写 vue3 语法
除此之外, 这篇博客: vue3+ts 时间选择器中的 vue3+ts 时间选择器 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

最近写了一些小项目，有用到时间选择器，但是系统自带有点丑，网上也没有找到合适的轮子，于是自己写了一个给大家分享一下。
文末有完整代码
在这里插入图片描述
功能

出场动画
选择时间
数据双向绑定

使用方式：

<template>
<div class="box">
<!--  <input id="dateTimePicker" placeholder="请选择时间"  type="text" @focus="show=true" @blur="show=false">-->
  <p>{{time}}</p>
  <input type="text" v-model="time" >
  <div>
  <p style="display: flex;width: 30vw;justify-content: space-between"><button @click="show=true">展示</button><button  @click="show=false" >隐藏</button></p>
  </div>
  <DateTimePicker  v-model="time" v-if="show" :show="show"></DateTimePicker>
</div>
</template>

<script setup lang="ts">
import DateTimePicker from './components/dateTimePicker/dateTimePicker.vue'
import {ref} from "vue";
const time=ref("2020/03/15 13:56:15")
const show=ref(true)
</script>

主要html代码：

     <!--      日期-->
      <div class="date_box" v-show="type==0">
        <template v-for="(dateValue,key,index) in pickerData.date">
          <div class="date_time_item" :id="key" @touchstart="isStop(true,key)"
               @touchend="isStop(false,key)"
               @scroll="scrolle($event,key)">
            <p id="scynull1"></p>
            <p :class="[key+item,className(key,formatTime(item))]" v-for="(item,index) in dateValue.data" :key="item">
              {{ item }}</p>
            <p id="scynul2l" style="height: 70px"></p>
          </div>
          <div class="unit">
            <div class="unit_item">
              {{ dateValue.unit }}
            </div>
          </div>
        </template>
      </div>

这里给盒子添加了 @scroll 事件的监听，通过判断滚动条的距离来判断当前选中的时间， @touchstart @touchend使用来判断用户手指是否离开屏幕，避免反复触发事件
js:

//触摸事件
const isStop = (val: boolean, key: string) => {
  stop.value = val
  if (!stop.value && refScrollTarget) {
    setTimeout(() => {
      scrolle(refScrollTarget, key)
    })
  }
}
//滚动事件
const scrolle = (event: any, key: string) => {
  refScrollTarget = event
  //滑动状态中就不执行后面代码
  if (stop.value == true) {
    return
  }
  if (timer) {
    clearTimeout(timer)
  }
  setTimeout(() => {
    timer = setTimeout(() => {
      //元素高度
      let itemHeight = 50
      //滚动结余量
      let scollValue = event.target.scrollTop % itemHeight
      //如果高度对应就返回
      if (scollValue - itemHeight == 0) {
        return
      }
      if (itemHeight - scollValue > itemHeight / 2) {
        event.target.scrollTop = event.target.scrollTop - scollValue
      }
      if (itemHeight - scollValue <= itemHeight / 2) {
        event.target.scrollTop = event.target.scrollTop - scollValue + itemHeight
      }
      const val = Math.round(event.target.scrollTop / itemHeight) || 0
      setDateTime(key, val.toString())
    }, 50)
  })
}

这里对绑定的数据进行了监听，和数据的初始化操作,因为写Ts时间不长，这个类型让我很是苦恼，为了清楚编译器报错，所以给了很多的any

//时间改变
const timeChanged = () => {
  if (props.modelValue) {
    DateTime.value = props.modelValue
  }
  ((document.getElementById('year') as any).scrollTop as any) = (Number(DateTime.value.slice(0, 4)) - 1980) * 50;
  ((document.getElementById('month') as any).scrollTop as any) = (Number(DateTime.value.slice(5, 7)) - 1) * 50;
  ((document.getElementById('day') as any).scrollTop as any) = (Number(DateTime.value.slice(8, 10)) - 1) * 50;
  ((document.getElementById('hour') as any).scrollTop as any) = (Number(DateTime.value.slice(11, 13)) - 1) * 50;
  ((document.getElementById('minute') as any).scrollTop as any) = (Number(DateTime.value.slice(14, 16)) - 1) * 50;
  ((document.getElementById('second') as any).scrollTop as any) = (Number(DateTime.value.slice(17, 19)) - 1) * 50;
}
onMounted(() => {
  timeChanged()
})
watch(
    () => props.modelValue,
    (newValue, oldValue) => {
      timeChanged()
    }
)
init()

您还可以看一下李德聪老师的vue3从0到1-超详细课程中的 vue3+ts+vite - 创建项目小节, 巩固相关知识点