element-ui使用及注意事项

# 使用
打开element-ui的官网,快速上手,组件的一个全局引入和按需加载的引入方式
这里使用的是一个全局引入

//应用elementui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//注册elementui组件
Vue.use(ElementUI); 

注意事项

el-switch标签

通常我们使用这个来表示状态,但是在这里,他的属性只能为布尔值,这个时候就要注意了, 是否和接口文档是同一类型(数据库可能定义的是number,用1和2来代替true和false),那么在获取到数据之后,我们就需要对它进行一个转换,在data中我们可以先将他的默认值设为 false

<el-form-item label="状态" prop="status">
        <el-switch v-model="cateForm.status"></el-switch>
</el-form-item>

this.cateForm.status = res.data.list.status == 1 ? true : false;

el-radio标签

使用这个标签时也需要多加注意,多选按钮,在使用时我们可以定义一个默认值让它对其中一个进行默认选中,但是,在这个里面,我们不再向以前一样对它的 value属性进行绑定,而是对它的lable属性进行绑定,如果默认值为数值类型,我们还需要对lable进行动态绑定

<el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
        </el-radio-group>
</el-form-item>