知识点总结1.Vue格式化日期操作 2.支持vue3最新版富文本操作获取返回值3.中国省市区级联数据

一.格式化日期

1.首先先安装Day.js 使用 npm 安装

npm install dayjs --save

2.导入使用

import dayjs from "dayjs";

3.在table表格中列表项中，加入 :formatter=“dateformatter”

  <!--  :formatter="dateformatter"  格式化日期 -->
    <el-table-column
      prop="lastUpdateTime"
      label="最近操作时间"
      :formatter="dateformatter"
    />

4.然后添加dateformatter函数

// 格式化日期
const dateformatter = (row: any, column: any) => {
  return dayjs(row.lastUpdateTime).format("YY-MM-DD HH:mm:ss");
};

5.结果展示：

二.支持vue3最新版富文本操作

1. 安装依赖包

npm install @wangeditor/editor-for-vue@next --save

2. 在引用页面加入如下代码

<template>

 <el-button @click="gethtml">获取返回值</el-button>

 <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
      />
      <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="valueHtml"
        @onCreated="handleCreated"
      />
  </div>

  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//富文本编辑器
 // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    const valueHtml = ref('<p>hellortrt778888</p>')
      const handleCreated = (editor:any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    };

const gethtml = () => {
  alert(valueHtml.value);
};

</script>

3.结果展示：

三.中国省市区级联数据

1…安装依赖包

npm install element-china-area-data -S

2.实际使用

<template>

  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted } from "vue";
import { regionData } from "element-china-area-data";


//省市区三级联动开始
const options = ref(regionData);
const selectedOptions = ref([]);
const handleChange = (selected:any) => {
  console.log(selected);
};
//省市区三级联动结束


</script>

3.效果展示