vue相关

一、头像缩略图转base64

效果：

1[00-00-05][20230427-024733912].jpg

1、选择图片

 <!-- 图片 -->
<div>
    <el-upload
      class="avatar-uploader"
      action="#"
      :auto-upload="false" 
      :on-change="imgPreview"
        >
        <img v-if="ppicture" :src="ppicture" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
 </div>

2、vue转换

//图片
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
let ppicture = ref("");
//图片转base64
const base64Image = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = (e) => {
      console.log(e);
      resolve(reader.result);
    };
    reader.onerror = (error) => reject(error);
  });
};
 //选完图片
const imgPreview = async (file) => {
  let base64 = await base64Image(file);
  ppicture.value = base64;
  console.log("ggg", ppicture.value);
};

二、格式化男女

普通

<div><span>性别：{{ sexFormate(user.usex) }}</span></div>

//格式化男女
function sexFormate(row) {
  if (row == 1) {
    return "男";
  } else if (row == 0) {
    return "女";
  }
}

表格

<!-- 表格 -->
<el-table :data="tableData">
  <el-table-column type="selection" />
  <el-table-column type="index" /> 
  <el-table-column prop="usex" label="用户性别" :formatter="sexFormate" />
</el-table>

//格式化男女
function sexFormate(row) {
  if (row.usex == 1) {
    return "男";
  } else if (row.usex == 0) {
    return "女";
  }
}

三、表格格式化日期

<!-- 表格 -->
<el-table :data="tableData">
  <el-table-column prop="createdTime" 
     label="创建时间" :formatter="dateFormat" />
</el-table>

import moment from "moment";
//格式化时间
function dateFormat(row) {
  return moment(new Date(row.createdTime).getTime()).format("YYYY/MM/DD");
}