<el-table-column width="55" type="checkbox"> <template> <el-checkbox></el-checkbox> </template> </el-table-column>
时间: 2024-02-16 10:28:21 浏览: 17
这是一段基于 Element UI 的 Vue 组件代码,用于创建一个带有复选框的表格列。其中,el-table-column 是 Element UI 表格组件的列组件,width 属性用于设置列宽,type 属性用于指定列类型为复选框,template 标签用于自定义列内容,el-checkbox 是 Element UI 复选框组件。这段代码的作用是在表格中添加一个带有复选框的列,用户可以通过勾选复选框来选择相应行数据进行操作。
相关问题
<el-table-column width="55" type="checkbox"> <template> <el-checkbox></el-checkbox> </template> </el-table-column>头部加个单选框怎么加
如果你想在这个表格列的头部添加一个单选框,可以在 el-table-column 组件内部添加一个 slot="header" 的 template 标签,并在其中自定义表头内容。具体代码如下:
```html
<el-table-column width="55" type="checkbox">
<template slot="header">
<el-checkbox></el-checkbox>
<el-radio></el-radio>
</template>
<template>
<el-checkbox></el-checkbox>
</template>
</el-table-column>
```
这样就在表头中添加了一个复选框和一个单选框。需要注意的是,因为复选框和单选框都是表头的一部分,所以需要将它们都放在 slot="header" 的 template 标签内部。
<el-table-column label-class-name="DisabledSelection" align="center" type="selection" width="90"> </el-table-column>阻止其它事件影响
如果你想在 el-table-column 中的选择框被点击时阻止冒泡和阻止默认事件,可以在 el-table-column 中的 selection-type 组件上添加 @click.stop 和 @mousedown.prevent 事件,代码如下:
```
<el-table-column label-class-name="DisabledSelection" align="center" type="selection" width="90">
<template slot-scope="{row}">
<el-checkbox v-model="selection" @click.stop @mousedown.prevent></el-checkbox>
</template>
</el-table-column>
```
这样,当选择框被点击时,不会影响到其他元素,也不会产生默认的选中效果。