共计 4665 个字符，预计需要花费 12 分钟才能阅读完成。
element-ui 的简单笔记
关注一下公众号：内有相关文章！！
九、消息提示
警告提示
1.1 创建警告提示
<el-alert title="成功信息提示" :closable="false" type="success">
<div slot> 我是辅助信息 </div>
</el-alert>
<el-alert title="成功信息提示" type="info"></el-alert>
<el-alert title="成功信息提示" type="warning"></el-alert>
<el-alert title="成功信息提示" type="error"></el-alert>1.2 属性的使用
<el-alert title="成功信息提示" effect="dark" :show-icon="true" center :closable="false" type="success">
<div slot> 我是辅助信息 </div>
</el-alert>9.2 Message 消息提示
2.1 创建组件
- 注意: 这个组件的创建无须在页面中书写任何标签, 他是一个 js 插件, 在需要展示消息提示的位置直接调用提供的 js 插件方法即可
# 1. 创建最简单的消息
this.$message('这是一个消息提示!!')
# 2. 自定义消息内容
this.$message({
message: h('p', null, [h('span', null, '订单创建成功, 您的订单编号为:'),
h('i', { style: 'color: teal'}, '87')
])
});
# 3. 不同主题的消息提示
this.$message({
message:'这是信息提示',
type:"success",
})
// 主题样式: success info warning error
# 4. 属性使用
this.$message({
message:'这是信息提示',
type:"success",
showClose:true,
center:true,
iconClass:'el-icon-user-solid',
duration:0
})
# 5. 方法的使用
this.$message.closeAll();
十、table 表格组件
1. 组件的创建
<el-table :data="tableData">
<el-table-column prop="id" label="编号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
</el-table>
<script>
export default {
name: "Tables",
data(){
return {
tableData:[{id:21,name:"小陈",age:23,email:"60037647@qq.com"},
{id:22,name:"小张",age:25,email:"60038647@qq.com"},
]
}
}
}
</script>2. 表格中列属性
- el-table-column 属性
<el-table-column prop="id" :resizable="false" header-align="left" align="center" fixed="left" width="200px;" label="编号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" :sort-method="sorts" sortable label="年龄"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="dept.name" :formatter="showDept" label="部门"></el-table-column>
<script>
export default {
name: "Tables",
data() {
return {
tableData: [
{
id: 21, name: "小陈", age: 23, email: "60037647@qq.com",
dept: {id: 1, name: "研发部"}
},
{
id: 22, name: "小张", age: 25, email: "60038647@qq.com",
dept: {id: 1, name: "小卖部"}
},
{
id: 23, name: "小李", age: 25, email: "60038657@qq.com",
dept:{}},
]
}
},
methods: {sorts(a, b) {return a.age - b.age;},
showDept(row, column, cellValue, index){console.log(row);
console.log(column);
console.log(cellValue);
console.log(index);
if(cellValue){return cellValue}
return "暂无部门";
}
}
}
</script>3. 表格属性
<el-table :data="tableData" empty-text="暂无数据" :row-class-name="showCss" highlight-current-row :show-header="true" :fit="true"
size="mini" :height="600" border>
</el-table>
<script>
.....
methods: {showCss({row, rowIndex}) {if (rowIndex % 2 == 0) {return "warning-row";}
return "success-row";
}
}
</script>4. 组件事件使用
<el-table @事件名 ="事件处理函数名"><el-table>
<script>
export default {
name: "Tables",
data() {//....},
methods: {
//... 事件处理函数
selectRow(selection, row){console.log(selection);
console.log(row);
}
}
}
</script>5. 组件方法的使用
<el-table ref="mytable">........</el-table>
// 调用方法
this.$refs.mytable. 方法名 6. 表格中定义操作列
<el-table>
....
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
name: "Tables",
data() {.....},
methods: {
// 用来处理编辑和删除的事件函数
handleEdit(index,row){console.log(index);
console.log(row);
},
handleDelete(index,row){console.log(index);
console.log(row);
}
}
}
</script>
7. 自定义表头
<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" >
.....
<!-- 展示搜索和操作 -->
<el-table-column>
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
name: "Tables",
data() {
return {
tableData: [
{
id: 21, name: "小陈", age: 23, email: "60037647@qq.com",
dept: {id: 1, name: "研发部"}
},
{
id: 22, name: "小张", age: 25, email: "60038647@qq.com",
dept: {id: 1, name: "小卖部"}
},
{
id: 23, name: "小李", age: 25, email: "60038657@qq.com",
dept: {}},
{
id: 24, name: "小四", age: 25, email: "60038657@qq.com",
dept: {}},
],
search: ''
}
},
methods: {sorts(a, b) {return a.age - b.age;},
showDept(row, column, cellValue, index) {if (cellValue) {return cellValue}
return "暂无部门";
},
showCss({row, rowIndex}) {if (rowIndex % 2 == 0) {return "warning-row";}
return "success-row";
},
selectRow(selection, row){console.log(selection);
console.log(row);
},
clearSelect(){this.$refs.mytable.clearSelection();
},
handleEdit(index,row){console.log(index);
console.log(row);
},
handleDelete(index,row){console.log(index);
console.log(row);
}
}
}
</script>
element-ui 的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！
正文完
