安装 element-ui 框架

• npm uninstall -g @vue/cli 卸载 vue
• npm install vue@2.6.14 下载 vue
• npm install -g @vue/cli
• vue create do
• npm i element-ui -S
• 按需引入 npm install babel-plugin-component -D
• babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { modules: false }]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

• main.js

// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 完整引入
// 引入 ElementUI 组件库
// import ElementUI from 'element-ui'
// 引入 ElementUI 全部样式
// import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import store from './store'
// 按需引入
import { Button, Row, DatePicker } from 'element-ui'
Vue.component('el-button', Button)
Vue.component('el-row', Row)
Vue.component('el-date-picker', DatePicker)
// 关闭 vue 的生产提示
Vue.config.productionTip = false
// 应用 ElementUI
// Vue.use(ElementUI)
// 创建 vm
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

遇到的问题

header 区 展开图标与"宿舍管理系统",不在一条线,文字出格 .collapse-btn{ float:left; } .header .logo{ float: left; }

报错:Component inside ＜Transition＞ renders non-element root node that cannot be animated.

• 切换页面,是否显示问题
• 在 Vue3 中使用做页面缓存后，检查每个页面是否有根标签，在 Vue3 中可以不写跟标签，但做缓存的时候要加上。

vue3 element plus el-input 无法输入问题

import { reactive } from 'vue'
 const queryParams = reactive({
      name: ''
    })

清空 el-input 内容

    /** 重置按钮操作 */
    const queryForm=ref()
    const resetQuery = () => {
      queryForm.value.resetFields()
      // this.handleQuery()
    }

setup 的查询所有宿舍操作

 /** 查询所有宿舍操作 */
    const loading = ref(true)
    const tableData = ref([]);
    const getDorm = async () => {
      loading.value = true
      axios.get('/dorm/getdorm', {}).then((response) => {
        let results = response.data || []
        if (results && results.length > 0) {
          tableData.value = results
          loading.value = false
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
    getDorm();

el-form-item 无法输入

• 未在 el-form-item 添加 prop="相应的 v-model 的值"

数据表删除一条记录后,id 不连续

• 在查询里面运行下列 sql
• 存在外键约束时更改不成时:
• 先关闭外键约束 SET FOREIGN_KEY_CHECKS=0;
• 操作完成后,再重新开启外键约束 SET FOREIGN_KEY_CHECKS=1;

SET @i=0;

UPDATE `notice` SET `id`=(@i:=@i+1);

ALTER TABLE `notice` AUTO_INCREMENT=0

不用后端接口的搜索查询

 let sea = queryParams.stuName
      if (sea) {
        loading.value = false
        tableData.value = tableData.value.filter(function (a) {
          return Object.keys(a).some(function () {
            return String(a['stuName']).toLowerCase().indexOf(sea) > -1
          })
        })
      } else {
        getStu()
      }

喜欢 (0)赏

[]

分享 (0)