vue3笔记（1-3）基础写法

本篇记录使用过的功能，包括：表格数据为空、表格序号自增、表格内部点击实现路由跳转、表格排序；自定义提示信息；通过 deep 改变组件样式；t s忽略类型检查

数据为空

1. table-column 中没有数据时，可以通过 css 控制显示–
   当项目中只有部分表格需要此功能时，建议给需要的表格添加类名。注意：如果表格数据使用slot，也需要添加 prop="XXX"，否则类似于开关（el-switch）按钮上会有–

   // 所有表格
   .cell:empty::before {
     content: "--";
     color: gray;
   }
   
   // 自定义class的表格
   .table-special :empty::before {
     content: '--' !important;
     color: gray !important;
   }

2. table没有数据时，通过slot插槽控制UI

   <el-table-column><el-table-column/>
   <div slot="empty" style="text-align: left;">
     <el-empty description="div里面可以自定义空内容" />
   </div>

el-table 使用过的功能记录

1. 表格序号自增
2. 路由跳转（外链+内部）
   #default="scope"可以任意自定义表格内内容展示

   <template>
     <el-table-column type="index" width="80" :index="startIndex" label="序号" />
      <el-table-column prop="name" label="客户">
         <template #default="scope">
           <router-link :to="{ path: '/orderDetail', query: { detail: scope.row.id } }">
           <span>{{ scope.row.name }}</span>
         </router-link>
       </template>
     </el-table-column>
     <el-table-column prop="url" label="地址">
       <template #default="scope">
         <a :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
       </template>
     </el-table-column>
   </template>
   
   <script lang="ts" setup>
   const startIndex = computed(() => {
     return (query.value.page - 1) * query.value.pagesize + 1
   })
   </script>

排序

前端排序

el-table-column中添加 sortable即可。
要注意的是，这只是当前页面的排序，如果翻到下一页，排序还是默认的第二页的排序。如果需要全局排序，则由后端排序处理。

后端排序

1. 方法一

   <el-table ref="table" @sort-change="onSortChange" :default-sort ="{'prop': prop,'order':type}" :data="tableData">
     <el-table-column width="100" prop="parent_name" label="组织" sortable='custom'>
       <template slot-scope="scope">
         <span>{{scope.row.name ? scope.row.id: ''}}</span>
       </template>
     </el-table-column>
   </el-table>
   
   <script lang="ts" setup>
   onSortChange({ prop, order }) {
     let orderF;
     if(order=='descending') {
       orderF = 'desc'
     }else if( order=='ascending') {
       orderF = 'asc'
     }else {}
       const ordering = getSortOrdering(prop, orderF);
       getApi({
         page: 1,
         pagesize: 10,
         ordering: ordering
       })
       .then((res) => {
         dataList.tableData = res.data;
       })
     }
   
   // 根据交互数据格式修改
   const getSortOrdering = (prop: string, order: string): string => {
     const prefix = order === "asc" ? "" : "-";
     return prefix + "time";
   };
   </script>

2. 方法二

    <template #header>
     <span>{{ item.label }}</span>
     <template v-if="item.prop === 'time'">
       <span class="icons">
         <i class="sort-caret ascending"
           @click="sortColumn(item.prop, 'asc')"
         ></i>
         <i class="sort-caret descending"
           @click="sortColumn(item.prop, 'desc')"
         ></i>
       </span>
     </template>
   </template>
   
   <script lang="ts" setup>
   const sortColumn = (prop: string, order: string) => {
     const ordering = getSortOrdering(prop, order);
     getApi({
       page: 1,
       pagesize: 10,
       ordering: ordering
     })
       .then((res) => {
         dataList.tableData = res.data;
       })
   };
   </script>

自定义提示信息

tip采用拼接string字符串形式，换行使用</br>，通过raw-content注入到组件中

<el-tooltip :content="tip" placement="top" raw-content>
  <el-icon><Warning /></el-icon>
</el-tooltip>

通过deep改变组件样式

<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin: 0;
}
</style>

typescript忽略类型检查

单行忽略(添加到特定行的行前来忽略这一行的错误)
// @ts-ignore

跳过对某些文件的检查 (添加到该文件的首行才起作用)
// @ts-nocheck

对某些文件的检查
// @ts-check