el-table-column点击事件
时间: 2023-05-18 22:03:21 浏览: 71
el-table-column 的点击事件是可以通过在 el-table-column 上使用 "cell-click" 或 "header-click" 事件来实现的。具体实现方法如下:
1. 在 el-table-column 上绑定 "cell-click" 事件:
```
<el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" @cell-click="handleCellClick">
</el-table-column>
```
2. 在 methods 中定义 handleCellClick 函数:
```
methods: {
handleCellClick(row, column, event) {
console.log(row, column, event)
}
}
```
在这个函数中,你可以使用 row 参数获取当前行的数据,使用 column 参数获取当前列的数据,使用 event 参数获取当前点击事件。
类似的,你也可以在 el-table-column 上绑定 "header-click" 事件来实现列头的点击事件。
相关问题
el-table-column实现点击
排序功能的方法是什么?
您可以通过添加属性“sortable”并将其设置为“true”,来使el-table-column实现点击排序功能。例如:
<el-table-column prop="name" sortable="true" label="Name"></el-table-column>
这将使名称列实现按名称排序的功能。注意,您需要在表格的根元素中添加“@sort-change”事件以处理排序操作。具体实现如下:
<el-table :data="tableData" @sort-change="sortChange">
<el-table-column prop="name" sortable="true" label="Name"></el-table-column>
<el-table-column prop="age" sortable="true" label="Age"></el-table-column>
</el-table>
然后您可以在“sortChange”方法中处理排序操作:
methods: {
sortChange(column) {
// 获取排序名称和排序顺序
const name = column.prop;
const order = column.order;
// 执行排序操作
// ...
}
}
el-table el-column selection disable
要禁用 Element UI 中的表格(el-table)中的某个列(el-column)的选择功能,可以在该列的配置中添加一个 `type` 属性,并将其设置为 `"selection-disabled"` 。示例如下:
```
<el-table :data="tableData">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column type="selection-disabled" label="Disable Selection"></el-table-column>
</el-table>
```
在上面的示例中,第三个列被设置为 `type="selection-disabled"` ,这样就禁用了该列的选择功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)