vue2使用elemntui与vue3使用elementui

1.vue2中使用elementUI

A.安装： npm install element-ui -S B.导入使用： import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; C.Vue.use(ElementUI)

// =============按需导入
import { Loading, Table, TableColumn, Form, FormItem, Input, Button, Upload } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
​
// 配合使用axios拦截器写一个请求显示加载
let loadingin = null
// 配置请求拦截器
axios.interceptors.request.use(config => {
  // 身份认证  token
  // 请求加载器
  loadingin = Loading.service({ fullscreen: true })
  return config
})
​
axios.interceptors.response.use(result => {
  // 身份认证  token
  // 关闭加载页面
  loadingin.close()
  return result
})
​
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Upload)
​
​
// ============全局导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

上传功能模块:

<template>
    <div>
        <el-upload
  class="upload-demo"
  drag
  action="string"
  multiple :http-request="upload">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
    <img :src="url" alt="">
    </div>
</template>
<script>
export default {
    data () {
        return {
            url: ''
        }
    },
    methods: {
        upload (params) {
            console.log(params) // 它是一个对象 对象中的file才是上传的文件
            // 判断文件大小不超过20kb
            if (params.file.type !== 'image/jpeg') {
                this.$layer.msg('文件格式不对')
                return false
            } else if (params.file.size > 60000) {
                this.$layer.msg('文件不能超过20kb')
                return false
            }
            const form = new FormData()
            form.append('attrName', params.file)
            this.$http.post('upload', form).then(val => {
                console.log(val)
                this.url = 'http://localhost:3000/' + val.data.path
            })
        }
    }
}
</script>

table列表操作案例:

<template>
    <div>
        <el-table
    :data="list"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="ID"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
      <a href="javascript:;" @click="edit(scope.row.id)">修改</a>&nbsp;
      <a href="javascript:;" @click="del(scope.row.id)">删除</a>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
import '@/Bus'
export default {
    props: ['list'],
    data () {
        return {
            info: this.list
        }
    },
    created () {
        console.log(this.list)
        this.info = this.list
    },
    methods: {
        del (id) {
            console.log(id)
            this.$emit('del', id)
            // this.info = this.info.filter(val => val.id !== id) 方式二:通过修改本组件数据
        },
        edit (id) {
          this.bus.$emit('edit', id)
        }
    }
}
</script>

2.vue3中使用ElementUI

1.安装npm i element-plus --save

import ElementPlus, { ElLoading } from 'element-plus'
import 'element-plus/dist/index.css'
​
let loadingin = null
// 配置请求拦截器
axios.interceptors.request.use(config => {
  loadingin = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  return config
})
​
axios.interceptors.response.use(result => {
  loadingin.close()
  return result
})
​
createApp(App).use(router).use(Element).mount('#app')

vue3中的数据绑定案例:

<template>
    <!-- <h2>{{msg}}</h2> -->
  <el-table :data="list" style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="age" label="Age" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="detail(scope.row.id, scope.$index)"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { getCurrentInstance, ref } from 'vue'
export default {
    setup () {
        const msg = ref('')
        const { proxy } = getCurrentInstance()
        // proxy.$http.get('data1').then(val => {
        //     msg.value = val.data
        // })
        console.log(msg.value)
        const list = [
            {
                id: 1,
                name: 'aa',
                age: 13
            },
            {
                id: 2,
                name: 'bb',
                age: 14
            },
            {
                id: 3,
                name: 'cc',
                age: 15
            }
        ]
        function detail(id, index) {
            console.log(id, index)
        }
        return {
            msg,
            list,
            detail
        }
    }
}
</script>

表单验证案例: 

<template>
  <div class="body">
    <div class="login">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="myForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="uname">
          <el-col :span="20">
            <el-input v-model="ruleForm.uname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-col :span="20">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(myForm)">登录</el-button>
          <el-button @click="resetForm(myForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
// 写用户名和密码框的验证方法
const passFn = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("密码不能为空"));
  }
  callback();
};
const unameFn = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("用户不能为空"));
  }
  callback();
};

const ruleForm = reactive({
  pass: "",
  uname: "",
});
// 规则又是一个对象
const rules = reactive({
  pass: [{ validator: passFn, trigger: "blur" }],
  uname: [{ validator: unameFn, trigger: "blur" }],
});

// 找到表单对象ruleForm
const myForm = ref(null);

const submitForm = (formEl) => {
  // formEl是表单元素对象
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
.body {
  width: 100%;
  height: 100vh;
  background-color: lightblue;
}
.login {
  width: 500px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-top: 80px;
}
</style>

​