elementUI使用手册
# el-table
# 1.el-table 翻页序号连续
<!-- 方法1 -->
<el-table-column label="序号" type="index" width="50" align="center">
<template v-slot="{ $index }">
<span>{{ $index + pageSize * ( currentPage - 1 ) + 1 }}</span>
</template>
</el-table-column>
<!--
$index 当前序号
pageSize 每页显示的条数
currentPage 当前页码
-->
<!-- 方法2 -->
<el-table-column label="序号" type="index" width="50" :index="tableIndex" align="center" />
<!-- 文档中index的类型可以是Function(index)，这里绑定一个方法，将返回值赋给index, 即该行的索引
methods: {
tableIndex(index) {
return index + this.pageSize * ( this.currentPage - 1 ) + 1
}
} -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 2.el-pagination 分页页数从 0 开始
<el-pagination background :current-page="currentPage" :page-size="pageSize" />
<script>
export default {
data() {
return {
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示条目个数
}
},
computed: {
queryParams() {
return {
page: this.currentPage - 1,
size: this.pageSize,
}
},
},
}
</script>
<!-- 调用接口的时候把queryParams传递过去就可以了 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 3.使用 v-loading 报错
在 main.js 中将 loading 引入 use
# 4.在 el-table 表格中使用 radio 单选按钮
<el-table>
<el-table-column label="选择">
<template slot-scope="scope">
<el-radio :label="scope.$index" v-model="radioStatus"
@change.native="getRowSelected(scope.$index, scope.row)">
</el-radio>
</template>
</el-table-column>
... ...
</el-table>
<script>
export default {
data() {
return {
radioStatus: false, // 是否被选中，默认都是 false
selectedId: '', //选中数据的id
}
},
methods: {
// 获取选中数据
getRowSelected(index, row) {
this.selectedId = row.id
},
},
}
</script>
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
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
# 5.el-table 改变单元格某一列的样式
<el-table :data="tableData" style="width: 100%" border :cell-stlye="set_cell_style">
<el-table-column label="选择">... ...</el-table-column>
</el-table>
<script>
methods: {
set_cell_style({row, column, rowIndex, columnIndex}) {
if(row.errorNum > 20 && column.label === '检测错误数') {
// 返回对象
return {
background: '#F56C6C', color: 'white'
}
} else if(row.errorNum > 10 && column.label === '检测错误数') {
return {
background: '#E6A23C', color: 'white'
}
} else if(row.errorNum > 0 && column.label === '检测错误数') {
// 返回字符串
return 'background: #67C23A; color: white'
}
}
}
// row 行数据对象 column 列对象
/*上述 column.label === '检测错误数' 等价于 columnIndex === 4，
用label主要是以免表格展示顺序更换，columnIndex也得相应的更改 */
</script>
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
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
# 6.el-table 动态生成表头
<!-- 循环并绑定prop -->
<el-table-column v-for="(key, i) in ruleTableLabel" :key="i" :label="key" :prop="key">
</el-table-column>
<script>
// 处理后端返回的数据data，并定义ruleTableLabel存储label
data.map(item => {
Object.keys(item).map(key => {
!this.ruleTableLabel.includes(key) && this.ruleTableLabel.push(key)
})
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 7.el-table 列使用 fixed 属性后，与其他列出现错位
把 el-table__fixed-body-wrapper 的 top 值修改成表头的高度就可以了。
# 8.el-table-column 添加 show-overflow-tooltip 内容超长，鼠标放上去后一直闪烁
用 el-tooltip 代替 show-overflow-tooltip 这个属性
<el-table-column prop="logMsg" label="日志信息" align="center">
<template slot-scope="scope">
<el-tooltip
effect="light"
:content="scope.row.logMsg"
popper-class="log-tooltip"
:disabled="scope.row.logMsg | ellipsis"
placement="top">
<span v-if="scope.row.logMsg.length > 100">
{{ scope.row.logMsg.split(0, 100)[0] + '...' }}
</span>
<span v-else>{{ scope.row.logMsg }}</span>
</el-tooltip>
</template>
</el-table-column>
<script>
//添加过滤器
filters: {
//如果文本内容长度少于100，就不显示tooltip组件
ellipsis (value) {
if (value.length > 100) {
return false
}
return true
}
}
</script>
<style>
.log-tooltip.el-tooltip__popper {
max-width: 90%;
height: 90%;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
margin: 0 auto;
overflow: scroll;
}
</style>
<!-- 注意：el-tooltip__popper的样式如果添加在scoped中是不生效的，因为元素默认是追加在body的。
通过popper-class属性对样式进行限定，否则其他页面有用到el-tooltip的样式会被覆盖。 -->
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
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
# 9.el-table 带翻页的多选
提示
在使用 element-ui 的 el-table 组件展示数据时，有时会要求批量提交不同页面勾选数据的功能，当切换分页时，能够记忆所有页面勾选的数据，然后进行批量操作。官网也没有直接提供案例来实现这种业务需求，但可以通过设置 row-key、reserve-selection 和 selection-change 事件来实现。
reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据。
row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。主要用来表示每行数据是通过哪个属性来进行区分，一般使用 id。
selection-change：当选择项发生变化时会触发该事件。参数 selection 将是所有页面已经勾选的数据。
如果是所有数据的全选，添加一个全选的按钮，在传参的时候跟后端约定一个全选的标识，因为添加了分页功能，默认只能从接口获取到一页的数据而不是所有的，通过约定的全选标识让后端处理所有数据的全选。页面展示的数据是否选中，只需要监听一下 tableData 的数据变化，然后通过 this.$refs.table.toggleRowSelection(row, true) 来设置行的选中状态就可以了。
<template>
<el-card>
<el-table :table-loading="loading" :tableData="tableData" ref="tableRef"
:row-keys="getRowKeys" @selectionChange="selectionChange">
<el-table-column :reserve-selection="true" type="selection" width="55" />
... ...
</el-table>
<com-pagination
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:total="total"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange" />
</el-card>
</template>
<script>
export default {
name: 'index',
data() {
return {
tableData: [], // 表格数据
pageSizes: [20, 50, 100],
total: 0,
pageSize: 20,
currentPage: 1,
loading: false,
multipleSelectionIds: [], // 所有选中的数据id集合包含跨分页数据
getRowKeys(row) { // 获取row的key值，并返回row.id为每行记录的唯一标识
return row.id
}
}
},
computed: {
// 请求数据列表的参数
queryParams() {
return {
//...其他参数,
page: this.currentPage,
limit: this.pageSize
}
}
},
mounted() {
this.queryList()
},
methods: {
queryList() {
// 调用后端接口，获取table表格数据
......
},
// 选中事件：单选或单页全选
selectionChange(selection) {
this.multipleSelectionIds = selection.map(item => item.id)
},
// 切换页码
handleSizeChange(val) {
this.pageSize = val
this.queryList()
},
// 翻页
handleCurrentChange(val) {
this.currentPage = val
this.queryList()
}
}
}
</script>
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# 10.el-table 中 type=selection 的列自定义 label 文字
# 11.el-table 数据的简单筛选过滤
# 12.el-table 16px gutter 表格表头出现错位缺少一格
/deep/ .el-table th.gutter {
display: table-cell !important;
background: #164773;
}
1
2
3
4
2
3
4
# 13.el-table 行点击事件，操作列不触发行点击事件
行事件触发 @row-click
1.按钮不向上冒泡触发行点击事件 @click.native.stop 按钮不向上冒泡触发行点击事件 @click.native.stop / @click.stop
2.按钮通过 render 函数渲染实现，render 函数中自带 event 事件，不用传参，不用写 e，直接 e.stopPropagation()就可以
相关文章：
el-table 的使用合集（含翻页多选，动态生成表头等） (opens new window)
vue+elementui 常见问题汇总 (opens new window)
el-table 行点击事件 row-click 与列按钮事件冲突 (opens new window)
# el-form
# 1.resetFields()
“添加” 和 “编辑” 放在了一个弹框表单里面，节省代码资源开销，但会使得 resetFields 失效，如果分开写弹框也就不会出现这个问题了。
重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容
失效原因:
1、使用 resetField() 之前 el-form 一定要加 ref 属性
2、表单项 el-form-item 没有添加 prop 属性，同时 prop 属性值需与表单项的 v-model 保持一致
3、resetFields() 是将表单项重置为初始值，而这个初始值是在 Vue mounted 时赋值上去的，如果在这之前对表单进行了赋值，则初始值会改变（例如 created 时），那么后面调用 resetFields() 则不会生效（不会是定义时的空值）。
解决方法：将赋值操作定义在 this.$nextTick() 中（保证了初始值不被修改）
# 2.el-select 下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
# el-upload
# 1. 文件上传基本介绍
<div class="flex-div uploaditem">
//这里是上传了那些文件的提示，我没有要默认的文件提示
<el-tooltip class="item" effect="dark" :content="tag.name" placement="top-start"
v-for="(tag,index) in fileList" :key="index">
<el-tag style="margin-right:10px;display:flex;" :disable-transitions="false"
@close="handleClose(index)" closable @click="downloadFile(tag)">
<i class="el-icon-paperclip"></i>
<span class="tagtext">{{tag.name}}</span>
</el-tag>
</el-tooltip>
<!-- <el-upload
class="upload-demo"
action //必要属性，上传文件的地址，可以不给，但必须要有，不给就i调接口上传
:http-request="uploadFile"//这个是就上传文件的方法，把上传的接口写在这个方法里
ref="upload"
:limit="fileLimit"//上传文件个数的限制
:on-remove="handleRemove"//上传之后，移除的事件
:file-list="fileList"//上传了那些文件的列表
:on-exceed="handleExceed"//超出上传文件个数的错误回调
:before-upload="beforeUpload"//文件通过接口上传之前，一般用来判断规则，
//比如文件大小，文件类型
:show-file-list="false"//是否用默认文件列表显示
:headers="headers"//上传文件的请求头
>
<~!--ction="/api/file/fileUpload" --~>
<el-button class="btn"><i class="el-icon-paperclip"></i>上传附件</el-button>
</el-upload> -->
</div>
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
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
# el-dialog
# 1.如何让 element-ui 的弹出框每次显示的时候初始化，重新加载元素
dialog 中有个子组件，新增和编辑都会使用该组件，现在遇到的问题是完成一次新增/编辑操作之后再次打开 dialog 的时候，表单中还残留着上一次填写的数据，有没有办法在 dialog 每次显示的时候根据 action 做一次“初始化”来清空一下 data？
<el-dialog title="提示" :visible.sync="dialogVisible"></el-dialog>
在 dialog 上面添加 v-if='dialogVisible'
<el-dialog title="提示" :visible.sync="dialogVisible" v-if='dialogVisible'></el-dialog>
原因：加载 v-if 之后，在每次加载 modal 的情况下，会重新渲染一遍页面元素，因此会重新请求数据
# 2.固定弹窗高度
<template>
<el-dialog>
<div class="el-dialog-div">
//用div包住内容，设定内容高度和overflow auto
</div >
</el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog-div{
height: 60vh;//如果高度过高，可用max-height
overflow: auto;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# el-tooltip
# 1.文字过多显示困难
max-width
// 计算是否需要显示tooltip
getTooltipShowFlag: (obj, content) => {
/* obj为鼠标移入时的事件对象 */
/* currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后再移除 */
let tempTag = document.createElement('span')
tempTag.innerText = content // 显示文本内容
tempTag.className = 'getTextWidth'
tempTag.style.fontSize = window.getComputedStyle(obj.target)['font-size'] // '14px'获取字体
document.querySelector('body').appendChild(tempTag)
let currentWidth = document.querySelector('.getTextWidth').offsetWidth
document.querySelector('.getTextWidth').remove()
/* cellWidth为表格容器的宽度 */
const cellWidth = obj.target.offsetWidth
/* 当文本宽度小于且等于容器宽度时，不显示tip，反之显示tip， 代表文本超过显示 */
// row.showTooltip = currentWidth <= cellWidth ? false : true;
console.log('打印', currentWidth, cellWidth)
return currentWidth <= cellWidth ? false : true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# el-tree
# 动态修改 CSS 样式
/deep/ .el-carousel__container {
height: var(--carousel-height);
}
1
2
3
2
3
<!-- js中 声明height变量在逻辑处更改即可 -->
<el-carousel :interval="playBackTime" arrow="hover" v-if="isPreview"
:style="{ '--carousel-height': height }">
<el-carousel-item v-for="item in 3" :key="item">
<img />
</el-carousel-item>
</el-carousel>
1
2
3
4
5
6
7
2
3
4
5
6
7
编辑 (opens new window)
上次更新: 2023/09/17, 23:41:49