<script lang="ts" setup> import { computed, ref } from 'vue' interface User { date: string name: string address: string } const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const handleEdit = (index: number, row: User) => { console.log(index, row) } const handleDelete = (index: number, row: User) => { console.log(index, row) } const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Jessy', address: 'No. 189, Grove St, Los Angeles', }, ] </script>改写成js

脚本转换为JavaScript

Vue 3 的 <script setup> 语法是 TypeScript 特有的，它提供了一种更简洁的方式来使用 Composition API。要将其转换为 JavaScript，需要移除类型定义和 <script setup> 语法，并将相关逻辑转换为 Vue 2 风格的 Options API 或 Vue 3 的 setup 函数形式。

使用 Vue 3 setup 函数

• 定义响应式引用：使用 Vue 3 的 ref 来创建响应式数据。
• 计算属性：使用 computed 来定义计算属性。
• 方法定义：将方法定义在 setup 函数中。

import { ref, computed } from 'vue';

export default {
  setup() {
    const search = ref('');
    const tableData = ref([
      // ... 同上 User 对象数组
    ]);

    const filterTableData = computed(() =>
      tableData.value.filter(
        data =>
          !search.value ||
          data.name.toLowerCase().includes(search.value.toLowerCase())
      )
    );

    const handleEdit = (index, row) => {
      console.log(index, row);
    };

    const handleDelete = (index, row) => {
      console.log(index, row);
    };

    return {
      search,
      filterTableData,
      handleEdit,
      handleDelete,
      tableData
    };
  }
};

注意事项

• 上述代码示例中省略了具体的 User 对象数组定义，应保持与原始 TypeScript 代码中定义的数组结构一致。
• 由于 JavaScript 不支持接口定义，所以 User 接口需要去除，直接使用对象数组。
• 确保在项目中已经配置了 Vue 3 相关的支持，以便正确使用 Composition API。17