vue3+element-plus+typescript前端技巧合集

1）DateTimePicker日期时间选择器中的时间转换

DateTimePicker日期时间选择器中输入的时间，在Form表单中提交时会默认转换成UTC时间，比如'2024-09-28T00:00:00.000Z'，UTC时间和本地时间存在8小时时差，导致用户在前端选的时间和提交到后端接口的时间也相差8小时。

如果想要将前端提交的时间默认转换成本地时间，可采用如下方式：

  <el-form-item>
    <el-date-picker 
    v-model="select_time" 
    type="datetimerange"
    start-placeholder="Start time"
    end-placeholder="End time"
    format="YYYY-MM-DD HH:mm:ss"
    date-format="YYYY/MM/DD ddd"
    time-format="A hh:mm:ss" />
  </el-form-item>

const InputForm = reactive({select_time: ['', '']})

//定义UTC时间转换为本地时间的函数

const convertToLocaleTime = <T extends string | Date>(dateTimeString: T) => {
  const date = new Date(dateTimeString);
  return date.toLocaleString();
}

const startTime = convertToLocaleTime(InputForm.select_time[0])
const endTime = convertToLocaleTime(InputForm.select_time[1])
InputForm.select_time = [startTime, endTime]

2）Table表格设置表头行的CSS样式，Table表项列设置为超链接：

  <el-table :data="currentTableData" height="820" style="width: 99.8%"
    :header-cell-style="{ background: '#3d8dd8', padding: '10', color: '#FFF' }">
    <el-table-column prop="id" label="ID" sortable width="100" />
    <el-table-column prop="title" label="标题" sortable width="180" />
    <el-table-column prop="link" label="链接" width="240">
      <template #default="scope">
        <a :href="scope.row.link" target="_blank" style="color: #3d8dd8;">
          {{ scope.row.link }}
        </a>
      </template>
    </el-table-column>
  </el-table>

3）Pagination分页功能：

<div class="demo-pagination-block">
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 15, 20, 25, 30]"
    :size="size"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>

const currentPage = ref(1)
const pageSize = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const total = computed(() => {
  return tableData.value.length
})
// 计算当前页的数据
const currentTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});
// 处理每页显示数量变化的事件
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
// 处理当前页码变化的事件
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

4）鼠标悬停div时，光标变为手型指针，div元素放大1.1倍：

  <div v-for="item in List" :key="item.title" class="inner-box">
    <span style="color: rgb(255, 255, 255);"> {{ item.title }}</span>
    <br>
    <span style="color: red;"> {{ item.number }}</span>
  </div>

  .inner-box:hover {
    cursor: pointer; //鼠标悬停时光标变为手型
    transform: scale(1.1); //鼠标悬停时元素放大1.1倍
    border-radius: 15px; //鼠标悬停时元素边框圆角的半径变为15像素
  }

5）div中多个字div行内等间距排列，超出屏幕宽度后自动换行：

<div class="box">
  <div v-for="item in List" :key="item.title" class="inner-box">
    <span style="color: rgb(255, 255, 255);"> {{ item.title }}</span>
    <br>
    <span style="color: red;"> {{ item.number }}</span>
  </div>
</div>

.box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;

  .inner-box {
    background-color: #5994ce;
    text-align: center;
    padding: 15px;
    font-size: 24px;
    border-radius: 10px;
    flex: 0 0 20%;
    /* 每个子 div 占 24% 的宽度（考虑边距） */
    margin: 2.5%;
    /* 设置边距以避免重叠 */
    box-sizing: border-box;
    /* 确保 padding 和 border 不影响总宽度 */
  }
 }