妙心人-CSDN博客

原创 vue3的开发基本配置

一、vite 安装vue3模板 npm create vite@latest二、安装路由 npm install vue-router@4三、安装axios npm install axios四、安装pinia好用的状态管理器，如果不想用可以安装vuex npm install pinia五、安装vueuse这个是一个vue3的Vue Composition api的集合npm i @vueuse/core六、安装你要用的UI组件库比如ant-design-vuenpm

2022-02-28 16:18:14 1356

原创 vue3 + Element-plus 表格二次封装

<template> <el-table :data="dataSource" :summary-method="getSummaries" :show-summary="showSummary" :default-sort="defaultSort"> <template v-for="(col,index) in columns"

2021-11-15 10:30:13 1869

原创 iview表格简单二次封装

iview表格简单二次封装<template> <Table ref="current" v-bind="$attrs" :columns="columns" :data="dataSource"> <template v-for="item in columns" :slot="item.slot?item.slot:''" slot-scope="{ row, column , index }"> <slot :

2021-11-15 10:27:39 840

原创 js 数组数据转换

dataConversion (options) { let _data = [] for (let i = 0;i < options.length;i++) { _data[i] = {} _data[i].label = options[i][this.fileType.label] _data[i].value = options[i]...

2021-11-15 10:23:15 580

原创 vite,vue3,javaScript,eslint项目配置

1、安装依赖npm install --save-dev eslint eslint-plugin-vue2、在根目录新建.eslintrc.js 文件module.exports = { root: true, parserOptions: { sourceType: 'module' }, parser: 'vue-eslint-parser', extends: ['plugin:vue/essential', 'eslint:recommended'], env: { b

2021-07-20 10:53:24 693 1

原创 vue3自定义v-resize缩放指令

function mounted(el, binding) { const handler = binding.value const options = { passive: !binding.modifiers?.active } window.addEventListener('resize', handler, options) el._onResize = { handler, options } if (!binding.modifiers?.quiet) {

2021-06-10 11:39:36 3485

原创 vue实现动态路由

1、定义路由注册表表（注意定义数据返回不符合要求的数据）// 视图组件const view = { Layout: () => import('@/layouts/Main.vue'), parentView: () => import('@/layouts/parentView'),}// 路由组件注册export const routerMap = { 'demo/home': { title: '首页', component: view.Layout, },

2021-05-28 15:47:30 2516

原创 vue实现的一个撤销和恢复功能

使用vue实现得一个撤销和回退功能有三个表格添加不同得数据在点击撤销时删除最后一条添加得数，在点击恢复删除的数据<template> <div style="width:1000px;margin:0 auto"> <Button type="info" @click="handleOk">添加</Button> <Table :columns="columns" :data="datas"><

2021-04-14 17:25:26 5705 1

原创 iview表格底部添加合计行，并可以一条滚动条显示

<template> <div class="merge-box">  <div style="min-width:1366px;"> <...

2019-08-22 18:53:32 4590 4

原创 vue取消还原数据功能

vue当input里面的值修改后，想要在点击取消时回退到原值handleEdit () {// 修改 // 先用localStorage存储form对象 localStorage.setItem('obj', JSON.stringify(this.formItem))},cancel () { // 取消 // 取消时把原来存储的值赋给现在的form对象中 let I...

2019-08-22 18:23:55 1610

qq_42783273的博客