<el-table :data='table__.slice(0,10)'>在el-table添加一列包含复选框、spinbox、及prop = 'name'
时间: 2025-01-05 12:39:32 浏览: 8
在Vue.js中使用Element UI的el-table组件时,你可以通过配置column来添加不同的列类型,包括复选框和spinbox。下面是一个示例,展示如何在el-table中添加一列包含复选框、spinbox以及prop = 'name'。
```html
<template>
<el-table :data="tableData.slice(0, 10)">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column label="Actions">
<template slot-scope="scope">
<el-input-number v-model="scope.row.value" :min="1" :max="10"></el-input-number>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', value: 1 },
{ name: 'Jane', value: 2 },
{ name: 'Jim', value: 3 },
// ... 其他数据
]
};
}
};
</script>
```
在这个示例中:
1. `el-table`组件的`:data`属性绑定了`tableData.slice(0, 10)`,表示只显示前10条数据。
2. `el-table-column`组件的`type="selection"`表示这一列是复选框列。
3. `el-table-column`的`prop="name"`表示这一列显示的是`name`属性。
4. 最后一列是一个自定义列,使用`el-input-number`组件来显示一个spinbox。
阅读全文