element-ui组件

element-ui组件

一、elementUI组件在使用时的问题

1、后台的响应数据是正常的，但是在前端的el-table中无法显示

（1）axios的响应拦截器对响应数据的格式处理问题

（2）el-table-column的prop属性值和后台数据的key（属性名不一致）

2、没有后台，数据是写在前端的数组中

3、核心问题：如何将el-table中的某行数据传递到javascript代码中

（1）在element-ui的el-table组件中，每个el-table-column都有一个隐含的作用域scope，通过scope可以拿到当前列的数据

（2）当表格中数据删除后，表格没有刷新

二、elementUI的消息组件

1、MessageBox 弹框：是模态框

（1）消息提示：当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

this.$alert（’消息框的内容’，’消息框的标题’，{

confirmButtonText ：’按钮上的文本’，

callback: ()=>{ } // 回调函数，当用户单击按钮时触发

}）

（2）确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框

this.$confirm（’消息内容’，’标题’，{

confirmButtonText: ‘确定’，

cancelButtonText: ‘取消’，

type: ‘消息框的类型’ // （sucess、warning、info、error）

}）.then(()=>{ }) //用户单击’确定’按钮后的操作代码

.catch(()=>{}) //用户单击’取消’按钮后的操作

（3）引入MessageBox进行消息的提示

MessageBox.confirm（’消息内容’，{

title：’消息框的标题’，

confirmButtonText: ‘确定’，

cancelButtonText: ‘取消’，

type: ‘消息框的类型’ ， // （sucess、warning、info、error）

callback: function(){ } //单击确定按钮后的操作

}）

2、Message 消息提示：非模态框，常用于主动操作后的反馈提示。

this.$message（{

showClose：true，//是否显示关闭按钮

message：’内容’,

type: ‘消息框的类型’， // sucess、warning、info、error，默认类型是info

duration：停留时间 //单位是毫秒，默认是3000毫秒

}）

3、Notification 通知

三、Form表单：

1、基本结构：

        ```javascript

表单控件

//“ref”：表示表单的别名，用于在js中定位form(this.$refs[‘ref属性值’])

//“rules”：用于定义表单控件的验证规则

//:model：用于绑定form,绑定后表单就是一个对象

//表单验证的语法：

this.$refs[“formName”].validate((valide)=>{

if(valide){

验证通过的操作

}else{

return false

}

})

//表单重置的语法：

this.$refs[“formName”].resetFields()

//表单内部控件的宽度设置

        ```

2、表单控件：

（1）单行文本框：

<el-input v-model="input" placeholder="请输入内容"></el-input>

（2）密码框：

<el-input v-model="input" placeholder="请输入内容" show-password></el-input>

（3）带图标的文本框：

<el-input v-model="input" placeholder="请输入内容" ></el-input>

“suffix-icon”：表示在右边放置图标
“prefix-icon”：表示在左边放置图标

（4）文本域

<el-input type="textarea" v-model="textarea" :row="行数" placeholder="请输入内容" ></el-input>

（5）开关：表示两种状态的切换

<el-switch
  v-model="value"
  active-color="#13ce66" //活动时的颜色
  inactive-color="#ff4949"> // 关闭时的颜色
</el-switch>

（6）复选框组和复选框

<el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
 </el-checkbox-group>

（7）单选框组和单选按钮

<el-radio-group v-model="radio">
   <el-radio label=""></el-radio> //普通单选按钮
   <el-radio-button></el-radio-button> //单选按钮
</el-radio-group>

四、Dialog组件

1、使用方法

 ```javascript

//对话框关闭之前

这是一段信息

@click="dialogVisible = false">取 消

@click="dialogVisible = false">确 定