目录
自定义插槽的方式
1.设置required:true
2.通过自定义插槽的方式
<el-form-item :label="status" class="proj-spec-col">
<label slot="label">{{status}} <span style="color:red">*</span></label>
//通过插槽的方式
<el-select
v-model="formQuery.appStatus"
clearable
style="min-width: 220px" class="ceshi_value">
<div v-for="(item, idx) in statusList" :key="idx">
<el-option
:label="item.itemNm"
:value="item.itemCd"
></el-option>
</div>
</el-select>
</el-form-item>效果：lable 框通过插槽的方式 获取 *
修改element 按钮的自定义状态：
直接在按钮上定义 style
<el-button type="primary"
plain
round
style="font-size:10px;padding-left: 13px;">
确定</el-button>el-dialog 回显table多选数据
需要：使用el-table 的 多选 Checkbox回显。
:row-key="（row）=>{return row.id}" 一般用id标识来确定返回唯一的值
<el-table :row-key="(row)=>{return row.id}" @selection-change="handleSelectionChange"
ref="multipleTable" :data="data"> :reserve-selection="true" 为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
<el-table-column :reserve-selection="true" type="selection" width="55">
</el-table-column> 这里模拟点击编辑按钮 需要请求后端api回显数据
//编辑按钮
edit(index, row) {
//编辑dialog 画面 回显
this.dialogTableVisible = true;
//this.form = JSON.parse(JSON.stringify(row));
mstApi.getMstListbyId(row.id).then(res=>{
this.TableData = res.data.data
this.TableData.forEach(item=>{
//list 有多个table的子值
row.list.forEach(id=>{
if(id == item.id){
this.$nextTick(function(){
this.$refs.multipleTable.toggleRowSelection(item);
})
}
})
})
})
},做到以上就可以回显数据，但是下一次点击编辑按钮时，这样还是会存在bug，没有清空multipleTable的集合，会导致出现多个或者重复的值存在集合中，数据错乱
this.$refs.multipleTable.toggleRowSelection(item); 这只是添加数据
我们在画面的取消按钮和确定按钮更新api都加上 ： this.$refs.multipleTable.clearSelection()
<el-button @click="()=>{this.dialogTableVisible = false;
this.$refs.multipleTable.clearSelection()}"> mstApi.update(this.form).then(res=>{
if(res.data.status == true){
this.filterData();
this.dialogTableVisible = false;
//用于多选表格，清空用户的选择
this.$refs.multipleTable.clearSelection()
this.$message({
type: "success",
message:"数据TM插进去了",
});
}
})element-ui 的CSS样式修改
方法有很多，我一般直接用>>> 穿透来改变element-ui自带的样式，不为他。这个简单好看粗暴。
插一句（crtl+shift+f ）整理代码格式真的太丑了
点击F12查看源码 找到element-ui原始CSS样式类
重新开发定义：因为element-ui 都是的text框都是圆角 label都是没有颜色的；我们加上颜色
在el-form上定义class类样式：class = 'table-style'
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form" class = 'table-style'>
<el-form-item label="活动名称" :label-width="formLabelWidth" >
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth" >
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>直接用>>>改变样式
<style scoped>
.line{
text-align: center;
}
.table-style >>>.el-form-item__label{
border-radius: 0px;
background-color:olivedrab;
color: aliceblue
}
.table-style >>>.el-input__inner{
border-radius: 0px;
}
.table-style >>>.el-form-item{
margin-bottom: 15px;
}
</style>修改后样式：
其他的用一样的方法。
多选删除el-table的数据
var idList = []
//遍历需要删除数据的唯一id
this.multipleSelection.forEach(item => {
idList.push(item.id)
})
//this.form.idList = idList; 携带多条数据更新同理
//请求api删除
api.remove(idList )
后端只需要定义了List<string> ids 来接收即可el-select value值拼接
参考官方文档
修改lable :label="`${item.value}:${item.label}`"
注意的是
：key标识为唯一的key 一般我们用来回显
：value 我们的真正选择取到的值 根据v-model 双向绑定
：label 是显示在下拉里的值
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="`${item.value}:${item.label}`"
:value="item.value">
</el-option>
</el-select>
</template>
input输入内容实时过滤搜索表格内容显示
添加filterText 变量 通过双向绑定v-model监控到变量的变化
<el-input v-model="filterText" placeholder="请输入内容"></el-input>这里可以用到computed
官网上定义为计算属性：
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
这样我们可以实时监控自己定义的变量：this.computed
computed:{
tables:function(){
var search=this.filterText;
if(search){
return this.list.filter(function(dataNews){
return Object.keys(dataNews).some(function(key){
return String(dataNews[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.list
}
}计算属性改变运行方法，并且返回给tables 在el-table上绑定data属性
<el-table
v-loading="listLoading"
:data="tables"
element-loading-text="Loading"
border
fit
highlight-current-row
>检索属性，只要是list中有的字段都可以作为检索条件进行模糊检索
提到computed 再说一下watch
computed 属于计算属性，watch 属于监控对象的变化
上面的实时检索table的功能也可以用watch来实现但是却麻烦
他最好的方法是，当你改变值或者对象的时候，调用方法做别的事情
前端分页
首先在data定义二个变量
pagesize 页码显示数 currentPage 当前页
<el-table :row-style="{ height: '38px' }"
:cell-style="{ padding: '0', 'verticle-align': 'top' }"
:data="tables.slice((currentPage - 1) * pagesize, currentPage * pagesize)" > 加入分页组件在table下面
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
:total="tables.length"
layout="total, sizes, prev, pager, next, jumper" >
</el-pagination>在methods 加入对象的两个方法
// 当前页的显示数目发生改变时触发方法
handleSizeChange: function (size) {
this.pagesize = size;
},
//当前页码改变时触发方法
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
},效果图
插一句：后端分页的话，需要后端的分页组件发送三个变量
total page current
前端定义三个变量
我们直接放到对应的组件变量即可，差不多的方法。根据业务需求吧
（还是前端方便，但是会出现幻读数据）
扫一扫
2067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
