0
点赞
收藏
分享

微信扫一扫

element-ui自定义表格头部的两种方法

老北京的热干面 2022-06-20 阅读 59

 

在项目中,有时候我们的项目要根据设计图来修改我们的表格的头部,一下就是element提供的两种修改头部的方法:

1.  Table-column Attributes  render-header 方法

element-ui自定义表格头部的两种方法_ico

 

element-ui自定义表格头部的两种方法_ico_02

<el-table-column
prop="delete"
label="删除"
:render-header="renderHeader"
width="120"
>
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.row)"
>
删除
</el-button>

</template>
</el-table-column>

element-ui自定义表格头部的两种方法_ico_02element-ui自定义表格头部的两种方法_ico_02

methods:
// 修改表格的头信息
renderHeader(h, { column }) {
// 重新渲染表头

if (column.property == 'delete') {
return h('i', {
class:
this.clickDeleteTime == 1
? 'el-icon-delete c-red'
: 'el-icon-delete',
style: 'font-size:24px',
on: {//这个是你的点击方法
click: () => {
this.clearAll()
}
}
})
}
},

element-ui自定义表格头部的两种方法_ico_02

这个是第一种方法:现在你就可以看到你的头部就是你想要的效果了,不过你会发现的console报了一个警告。

element-ui自定义表格头部的两种方法_ico_06

对于我这种对代码有洁癖的人,很不喜欢这种,开个小玩笑,那就解决掉这个警告不就行了,仔细看了下element文档,有个新的方法,这就是第二个实现方法。

 2.

Table-column Scoped Slot

element-ui自定义表格头部的两种方法_ico_07

 

 

element-ui自定义表格头部的两种方法_ico_02

<el-table-column
prop="delete"
label="删除"
width="120"
>
<template
slot="header"
slot-scope="{ column, $index }"
>
<i
class="el-icon-delete"
@click="clearAll"
>
</i>
</template>
<template slot-scope="scope">
<el-button
type=""
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>

element-ui自定义表格头部的两种方法_ico_02

第二种方法完美解决,是不是很简单,那就开是行动吧!


在项目中,有时候我们的项目要根据设计图来修改我们的表格的头部,一下就是element提供的两种修改头部的方法:

1.  Table-column Attributes  render-header 方法

element-ui自定义表格头部的两种方法_ico

 

element-ui自定义表格头部的两种方法_ico_02

<el-table-column
prop="delete"
label="删除"
:render-header="renderHeader"
width="120"
>
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.row)"
>
删除
</el-button>

</template>
</el-table-column>

element-ui自定义表格头部的两种方法_ico_02element-ui自定义表格头部的两种方法_ico_02

methods:
// 修改表格的头信息
renderHeader(h, { column }) {
// 重新渲染表头

if (column.property == 'delete') {
return h('i', {
class:
this.clickDeleteTime == 1
? 'el-icon-delete c-red'
: 'el-icon-delete',
style: 'font-size:24px',
on: {//这个是你的点击方法
click: () => {
this.clearAll()
}
}
})
}
},

element-ui自定义表格头部的两种方法_ico_02

这个是第一种方法:现在你就可以看到你的头部就是你想要的效果了,不过你会发现的console报了一个警告。

element-ui自定义表格头部的两种方法_ico_06

对于我这种对代码有洁癖的人,很不喜欢这种,开个小玩笑,那就解决掉这个警告不就行了,仔细看了下element文档,有个新的方法,这就是第二个实现方法。

 2.

Table-column Scoped Slot

element-ui自定义表格头部的两种方法_ico_07

 

 

element-ui自定义表格头部的两种方法_ico_02

<el-table-column
prop="delete"
label="删除"
width="120"
>
<template
slot="header"
slot-scope="{ column, $index }"
>
<i
class="el-icon-delete"
@click="clearAll"
>
</i>
</template>
<template slot-scope="scope">
<el-button
type=""
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>

element-ui自定义表格头部的两种方法_ico_02

第二种方法完美解决,是不是很简单,那就开是行动吧!

举报

相关推荐

0 条评论