vue-elementUI的使用记录
vue-elementUI使用笔记
elementUI的具名插槽
1
2
3
4
| <el-input placeholder="请输入" v-model.number="data.number" class="input-with-select">
<el-button slot="prepend" class="budget" icon="el-icon-search">搜索</el-button>
<el-button slot="append" class="budget" icon="el-icon-search">搜索</el-button>
</el-input>
|
slot=”preprend” 在输入框前面插入按钮(可以对应jQuery中的逻辑的prepend() 方法在被选元素的开头（仍位于内部）插入指定内容）
slot=”append” 在输入框后面面插入按钮(可以对应jQuery中的逻辑的append() 方法在被选元素的结尾（仍然在内部）插入指定内容）
1
2
3
4
5
6
7
| <el-form-item>
<span slot="label" class="tabs">
<i class="el-icon-date"></i>
表单项名
</span>
<el-input v-model="vlue"></el-input>
</el-form-item>
|
1
2
3
4
5
6
| <el-tab-pane name="keywords">
<span slot="label" class="tabs">
<i class="el-icon-date"></i>
关键词
</span>
</el-tab-pane>
|
对于一些弹出框 气泡 tooltip 都需要一个参考(reference)的标签进行提示 实际作用是作为弹出框的position的绝对定位的相对定位(根据此标签进行绝对定位)
1
2
3
4
5
6
7
8
9
| <el-popover
placement="top"
title="标题
width="200"
trigger="hover"
content="展示内容
>
<i class="iconfont icon-wenhao" slot="reference"></i>
</el-popover>
|
table表格
渲染问题
table表格是根据数据源进行渲染,当你需要在请求后再次渲染数据
只需要注意对于数据源的深拷贝就可以让table组件进行再次渲染数据
1
2
3
4
5
6
| <CustomTable
:dataSources="tableData"
:totalNumber="totalNumber"
@loadData="handelGetList"
v-loading="loading"
/>
|
当第一次请求已经得到数据 tableData时,再次发送请求
1
2
3
4
5
6
7
8
9
10
11
| let data = await getData(params)
this.tableData = data.list;
let tempArr = data.list;
getOtherData(params).then(res=>{
tempArr = { ...res, ...tempArr };
})
|
select选择器
v-model取值为当前对象
当选择的数据需要options选中的label对应的对象数据时，使用value-key
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <el-select
v-model="value"
placeholder="请选择广告主"
value-key="id"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
//在data中定义options属性，当组件有多个选择器 可以将数据源options抽离
//使用as可自定义属性名
//import * as Options from "@/assets/OPTIONS/options.js";
import {Options} from "@/assets/OPTIONS/options.js";
data(){
return {
Options
}
}
|
当使用select组件的远程搜索且多选时，组件的再次搜索会令前面的组件显示为value实际id
使用reduce保存旧值
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
38
39
40
41
42
43
44
| <el-select
v-model="data"
multiple
filterable
clearable
remote
reserve-keyword
value-key="id"
placeholder="请输入搜索词"
:remote-method="remoteMethod"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item"
>
<span style="float:left">{{item.name}}</span>
</el-option>
</el-select>
methods: {
async remoteMethod(query) {
if (query !== "") {
let params = {
name: query
};
let query = await QueryData(params).then(res => {
return res;
});
var TempObj = {};
this.options = [...query, ...this.data].reduce(
(item, next) => {
TempObj[next.id]
? ""
: (TempObj[next.id] = true && item.push(next));
return item;
},
[]
);
} else {
this.options = [];
}
},
}
|
表单验证规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <el-form
:model="Form"
:rules="rules"
ref="Form"
label-width="150px"
v-loading="loading"
>
<el-form-item label="显示名" prop="data.key" class="custom">
<el-select
v-model="value"
placeholder="请选择广告主"
value-key="id"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-form>
|
当表单是动态加载时或验证的属性时数组对象时
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
| <!-- el-form的data属性为obj prop的属性为 obj.content.0 -->
<el-form-item :prop="'content.' + index" v-for="(item, index) in content" :key="item.id">
<el-row class="content" :gutter="20">
<el-col :span="i.span" v-for="i in tableHead" :key="i.key">
<span v-if="i.key == 'number'" style="line-height:32px">{{ index + 1 }}</span>
<!-- el-form-item内的el-form-item需要触发验证规则且提示则需要在:prop="'content.' + index + '.name'"-->
<!-- rules规则提供验证且validator的value参数为当前输入的表单 obj.content.0.name-->
<el-form-item
:prop="'content.' + index + '.name'"
v-else-if="i.key == 'name'"
:rules="{
required: true,
message: 'name' + $t('rule.required'),
trigger: 'blur'
}"
>
<base-input v-model="item.name"></base-input>
</el-form-item>
<el-form-item
:prop="'content.' + index + '.email'"
v-else-if="i.key == 'email'"
:rules="{
required: true,
validator: FormRule.email,
trigger: 'blur'
}"
>
<base-input v-model="item.email"></base-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
|
rules.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| export const rules = {
one：: [{
required: true,
message: '请选择',
trigger: 'change'
}]
"first.secend": [{
required: true,
message: '请选择',
trigger: 'change'
}]
}
|
1
2
3
| 如何解决rule验证规则在提示后切换影响其他验证规则(实际是验证规则会在el-form-item标签下生成一个div 提示el-form-item__error 但是在渲染时候v-if判断某个条件时无法再次重渲染)
在el-form-item上加入 :key="ruleskeys" data定义为 ruleskeys：1 其他受影响的加上 :key="ruleskeys+1"
在保证key值不一致的情况下 当v-if判断后会重新渲染
|
dialog对话框
对话框显示隐藏
1
2
3
4
5
6
7
8
9
10
11
| <Dialog :visible="ShowdialogVisible" @hideDialog="ShowdialogVisible = false"/>
<el-dialog title="标题" :visible.sync="showDialog" width="500px" @closed="$emit('hideDialog')"></el-dialog>
props: {
visible: Boolean,
},
data() {
return {
showDialog: false
};
},
|
vue计算属性实现Table表格模糊搜索（表格数据源不变）
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <template>
<div>
<el-input placeholder="请输入名称或ID" v-model="search" class="input-with-select">
<el-button slot="append" icon="el-icon-search">搜索</el-button>
</el-input>
<el-table
ref="multipleTable"
:data="tables"
height="280"
tooltip-effect="light"
row-key="id"
>
<el-table-column label="名字">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
export default {
computed: {
// 模糊搜索
tables() {
const search = this.search;
if (search) {//判断搜索单词是否为空
//返回搜索后的数组
return this.tableData.filter(data => {
//检索数组内的对象每一个键值
//当有一个键值indexOf(字符串搜索下标)大于0返回这个对象为true，
//filter函数判断true则通过对象，false则过滤对象
//.toLowerCase().indexOf(search) > -1 不区分大小写
return Object.keys(data).some(key => {
return (
String(data[key])
.toLowerCase()
.indexOf(search) > -1
);
});
});
}
//数据为空时返回全部数据
return this.tableData;
}
},
data() {
return {
tableData: [{id:0,name:"hello"，id:1,name:'words'}],
search: ""
};
},
}
|
计算属性是基于它们的响应式依赖进行缓存的
因此，每当search改变时，触发computed->tables使用filter函数返回一个新的数组赋值到Table表格的data数据源
Cascader 级联选择器
当你配置了props存在disabled 那么在搜索时将不会显示disabled为true
搜索只能是disabled为false
