<el-table :data="tableData"> 绑定数据列表 <el-table-column label='分类名称' prop="name"> 调取分类名称 </el-table-column> <el-table-column label='分类类型' prop="type"> 调取分类类型 </el-table-column> <el-table-column label='操作时间' prop="updateTime"> 调取操作时间 </el-table-column> <el-table-column label='排序' prop="sort"> 调取排序 </el-table-column> <el-table-column label='操作'> <template slot-scope="scope"> <el-button type="text" size="small" @click="dialogVisible=true">修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button> </template> </el-table-column>
时间: 2024-03-14 13:08:38 浏览: 29
这是一个使用 Element UI 的表格组件,通过绑定 tableData 数组来渲染数据列表。每个 el-table-column 标签中的 prop 属性用于指定要渲染的数据字段。在最后一个 el-table-column 标签中,使用了插槽来自定义操作列的内容,其中使用了 scope.slot-scope 属性来获取当前行的数据。点击修改按钮会触发 dialogVisible 变量的改变,从而显示一个弹窗用于修改数据。点击删除按钮会触发 deleteHandle 方法来删除当前行的数据。
相关问题
<el-table :data="taskList" border="true"> 表头可拖动,如何设置拖动最小位置
对于表头可拖动的功能,你可以使用 Element UI 提供的 sortable-column 组件来实现。sortable-column 组件可以让表头可以拖动进行排序操作。
要设置拖动的最小位置,你可以通过给表格的列设置 min-width 属性来限制拖动的最小宽度。例如:
```html
<el-table :data="taskList" border="true">
<el-table-column prop="name" label="任务名称" min-width="100"></el-table-column>
<el-table-column prop="status" label="状态" min-width="80"></el-table-column>
<!-- 其他列 -->
</el-table>
```
在上面的示例中,我们给任务名称列设置了 min-width 属性为 100,给状态列设置了 min-width 属性为 80。这样就限制了用户拖动列的宽度时的最小值。
你可以根据实际需求调整 min-width 属性的值来设置拖动的最小位置。
<el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> </template> </el-table-column> </el-table>设置一个滚轮
你可以将 `<el-table>` 组件包裹在一个固定高度的容器中,并设置 `overflow-y: scroll` 来实现滚动条的效果。例如:
```html
<div style="height: 300px; overflow-y: scroll;">
<el-table :data="dialogObj.children">
<el-table-column prop="name" label="分项"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="deleteSelectedData(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
```
这样,当表格内容超出容器高度时,会自动出现纵向滚动条。你可以根据需要调整容器的高度和样式。