avatar

整理一些平时项目中用到的element的用法 持续更新

表格的相关操作

一、跨页勾选

几个关键点
reserve-selection 与 row-key=””
表示表格每一行的唯一标识 如果你表格内部标识是重复的 那不适合用跨页勾选

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<el-table
size="small"
row-key="spuId"
ref="table"
@selection-change="handleSelectionShelfChange"
@row-click="handleRowclick"
>

<el-table-column
type="selection"
align="center"
width="55px"
:reserve-selection="true">

手动勾选 与 清空 重置
toggleRowSelection 与 clearSelection
需要拿到原型

1
2
3
4
5
6
7
8
9
10
11
handleSelectionShelfChange(val){
// handleSelectionShelf 勾选的数据
this.handleSelectionShelf=val
},
handleRowclick(val){
this.$refs.table.toggleRowSelection(val)
},

reset(){
this.$refs.table.clearSelection();
}

因 定位 或者其他问题导致的表格错乱

方法

1.doLayout()
table是表格实例
作用 对表格重新布局

1
this.$refs.table.doLayout()

2.$forceUpdate()
强制更新
作用 对于实际表格已经赋值 但是页面没有渲染有作用
这里我贴一个 之前在做spu时的一段代码
这段代码 是做动态自定义表格内属性操作时的
解决了数据更新后 表格内的表单元素无法操作的原因

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
getTable(){
if( this.specification.length==0){
this.tableData =[]
this.$forceUpdate()
}else{
let copyArr=this.func([],0,this.specification,[])
let newArr = []
copyArr.map((item,index)=>{
let obj = {}

item.map((it,i)=>{
obj[this.specification[i].key] = it.value||''
})
newArr.push(obj)
})
let myResult = sumarrSpu(newArr,this.tableData)
console.log('myResult',myResult)
this.tableData =myResult;
this.$forceUpdate()
}
},

elementUI设置日期时间选择器只能选择当前及之后的时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 <el-date-picker
style="width:156px"
v-model="updateDailyPoolForm.startTime"
type="date"
placeholder="选择开始日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
<span>至</span>
<el-date-picker
style="width:156px"
v-model="updateDailyPoolForm.endTime"
type="date"
placeholder="选择结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
<el-date-picker
class="input-border-null"
prefix-icon="el-icon-alarm-clock"
v-model="param.scheduleTime"
type="datetime"
placeholder="提醒我"
:picker-options="pickerOptions">
</el-date-picker>
data() {
return {
// 设置只能选择当前日期及之后的日期
pickerOptions: {
disabledDate(time) {
//如果没有后面的-8.64e7就是不可以选择今天的
return time.getTime() < Date.now() - 8.64e7;
}
},
}
文章作者: 张复明
文章链接: https://hexo.zhangaming.com/2020/10/15/element-ui/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 阿明的博客
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论