Element-UI的使用

据说幸运很容易
368 阅读3分钟

安装和全局引入就不在此处说明了，可以去官网查看，以下之说明一些组件的使用。

Element - 网站快速成型工具

1、按需引入

首先，安装element-ui

npm i element-ui -S

然后，安装 babel-plugin-component：

npm install babel-plugin-component -D

创建.babelrc文件报错，可以把配置放到babel.config.js中

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

然后安装@babel/preset-env

npm i @babel/preset-env -D

main.js中写以下内容引入需要的组件

import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button) 
Vue.use(Select)

2、自定义主题

以下方法适用项目中没有使用scss，使用命令行主题工具进行主题定制。

 npm install sass-loader node-sass -D
 cnpm install element-theme -g              
 cnpm i element-theme-chalk -D                 
 et -i [可以自定义变量文件]

注意：主题工具最好用淘宝镜像安装，鉴于个人之前安装一直出错，直到使用淘宝镜像才安装成功。另外，如果安装失败，可以卸载以上再重新安装（可以多试几次）。

如果et出现primordials is not defined

  • 1、cnpm install element-themex -g 或者 npm install element-themex -g

  • 2、et(如果没有安装，先执行et i)

注意：

（1）每次修改了element-variables.scss需要运行et才能修改成功

（2）main.js中导入文件:import '../theme/index.css'

3、表单验证

示例如下：

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium">
        <el-row :gutter="5">
          <el-col :span="12"
            ><el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" class="setSex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%"></el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="tel"> <el-input v-model="ruleForm.tel"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email"> <el-input v-model="ruleForm.email"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="所在部门" prop="department">
              <el-select v-model="ruleForm.department" placeholder="请选择所在部门">
                <el-option :label="item.name" :value="item.id" v-for="item in d_option" :key="item.id"></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="职务" prop="job">
              <el-select v-model="ruleForm.job" placeholder="请选择职务">
                <el-option :label="item.description" :value="item.code" v-for="item in j_option" :key="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受教育程度" prop="edu_level">
              <el-select v-model="ruleForm.edu_level" placeholder="请选择受教育程度">
                <el-option :label="item.description" :value="item.code" v-for="item in e_option" :key="item.code"></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="专业技能" prop="spcialty"> <el-input v-model="ruleForm.spcialty" type="textarea" :rows="4" resize="none"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark"> <el-input v-model="ruleForm.remark" type="textarea" :rows="4" resize="none"></el-input> </el-form-item></el-col
        ></el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="address"> <el-input v-model="ruleForm.address" type="textarea" resize="none"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
<script> 
export default {
data() {
    const checkEmail = (rule, value, callback) => {
      const regEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的邮箱号'))
    }
    const validateStartTime = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('开始时间不能为空'))
      } else {
        callback()
      }
    }
    return {
     ruleForm: {
        id: '',
        name: '',
        sex: '',
        birthday: '',
        department: '',
        job: '',
        edu_level: '',
        spcialty: '',
        address: '',
        tel: '',
        email: '',
        state: '',
        remark: '',
      },
       rules: {
        name: [{ required: true, message: '请输入员工', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        tel: [
          {
            required: true,
            pattern: /^1[345789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        department: [{ required: true, message: '请选择部门', trigger: ['blur', 'change'] }],
        job: [{ required: true, message: '请选择职务', trigger: 'change' }],
        edu_level: [{ required: true, message: '请选择受教育程度', trigger: 'change' }],
        birthday: [{ type: 'date', validator: validateStartTime, trigger: 'change' }],
      },
 }
methods: { 
  submitForm(formName) { 
   this.$refs[formName].validate((valid) => { 
     if (valid){
        alert('submit!'); 
     }else { 
        console.log('error submit!!'); 
        return false; 
   } 
 }); 
}, 
  resetForm(formName) { 
     this.$refs[formName].resetFields(); 
   } 
 } 
}
</script>

效果如下：

image.png

注意点：

1、可以使用el-row配合el-col实现多个el-form-item在一行显示

2、需要对某个表单项添加一条验证规则需要在对应el-form-item添加prop="rule"，rule为rules中的一个属性。 3、设置正则验证可在rules属性下的pattern中定义正则规则；如果验证条件比较负载也可在return外面定义函数，然后对应rules属性下写上validator:函数名

4、表格分页（前端实现）

核心：:data="tableData ? tableData.slice((pagenum - 1) * pagesize, pagenum * pagesize) : []"

    <el-table
:data="tableData ? tableData.slice((pagenum - 1) * pagesize, pagenum * pagesize) : []" >
    </el-table>
    <div class="block">
      <el-pagination 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :page-sizes="[1, 2, 5, 10]" 
      :page-size="pagesize" 
      layout="total, sizes, prev, pager, next, jumper"     
      :total="tableData ? tableData.length : 0"> 
      </el-pagination>
    </div>
    data(){
    return{
      pagesize: 2,
      pagenum: 1,
      tableData: [],
    }
   }

5、表格获取一行的数据

@click="handleEdit(scope.$index, scope.row)"
  handleEdit(index, row) {
  //注意：index返回的是分页后所在页的索引
  //      row返回总数据中的索引
      console.log(index)
      console.log(row)
   }

6、ElementUI最新版本使用el-date-picker报警告问题

原因：element-ui 2.15.9版本有问题。

解决办法：将版本回退到2.15.8（注意：如果版本前面使用^符号，应该去掉该符号，因为^会匹配最新版本）

网友提供："element-ui": ">2.15.9 || 2.15.8",

另外补充一下package.json中版本号前面的符合代表什么意思：

版本号，一般是这样的：1.4.7 ，分别代表：大版本号. 次版本号 . 小版本号

  1. ^符号

比如：^2.5.8 代表的就是：匹配大版本2.x.x的最新版本，但是最低版本不能低于2.5.8,也就是说可以匹配2.5.9，也可以匹配2.6.9，但是不能匹配2.5.7(比2.5.8低)，也不能匹配3.0.0(超过了大版本2)。

  1. ~符号

比如：~2.5.8 代表的就是：匹配小版本2.5.x的最新版本，也就是：2.6.0>版本>=2.5.8

如有错误，欢迎各位提出；如有补充，欢迎补充。这篇文章会持续更新，后续遇到相关问题会总结添加。😁😁

avatar
文章
阅读
粉丝