el-table-column怎么使用auto-width
时间: 2023-10-28 22:36:01 浏览: 27
你可以使用 :min-width 和 :width 属性来设置列的宽度,然后将 :width 设置为 auto,即可让列宽度自适应其内容。例如:
<el-table-column prop="name" label="姓名" :min-width="100" :width="auto"></el-table-column>
相关问题
el-table-column width
el-table-column width是用于设置表格列的宽度的属性。可以通过设置width属性的值为具体的像素值或者百分比来控制列的宽度。同时,也可以设置min-width属性来控制列的最小el-table-column width是用于设置表格列的宽度的属性。可以通过设置width属性的值为具体的像素值或者百分比来控制列的宽度。同时,也可以设置min-width属性来控制列的最小宽度。在el-table中,可以通过设置width="auto"和min-width="百分比"的方式来实现表格和列宽度跟随浏览器宽度变化而变化。需要注意的是,所有列min-width总和要等于100%。如果是文字类型的列,可以配合使用show-overflow-tooltip来实现内容过长时的省略号显示和鼠标悬停时的tooltip提示。除此之外,还可以通过在el-table标签上添加v-fit-columns属性来自动适应列宽。
el-table el-column selection disable
要禁用 ElementUI 中 el-table 中 el-column 的选择功能,可以在对应的 el-table 中设置 `@selection-change` 事件,通过传递的参数 `row` 和 `selected` 来判断是否取消选择。
具体代码如下:
```html
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="row => row.id">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 25 },
],
// 存储选中的行的 id
selectedRowIds: [],
};
},
methods: {
handleSelectionChange(selection) {
// 判断选中的行是否需要取消选择
selection.forEach(row => {
if (this.selectedRowIds.includes(row.id)) {
this.$refs.table.toggleRowSelection(row, false);
} else {
this.selectedRowIds.push(row.id);
}
});
},
},
};
</script>
```
在 `handleSelectionChange` 方法中,通过判断 `selected` 中的行是否在 `this.selectedRowIds` 数组中,来确定是否需要取消选择。如果需要取消选择,则调用 `this.$refs.table.toggleRowSelection(row, false)` 方法来取消选择。否则,将该行的 id 添加到 `this.selectedRowIds` 数组中,表示这一行已经被选择了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)