el-table中加入el-input
时间: 2023-11-09 14:03:29 浏览: 225
可以在el-table的列定义中使用自定义模板来实现在表格中加入el-input。具体步骤如下:
1. 在el-table-column中设置scoped-slot属性,指定自定义模板的名称,例如:
```
<el-table-column label="姓名">
<template slot-scope="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
</el-table-column>
```
2. 在el-table中设置data属性,指定表格数据源,例如:
```
<el-table :data="tableData">
<!-- 列定义 -->
</el-table>
```
3. 在Vue实例中定义tableData数组,例如:
```
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
}
```
这样就可以在表格中显示el-input,并且可以通过v-model绑定数据源中的值。
相关问题
<el-table :data="membersList" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column label="考勤人员" align="center"> <el-table-column label="姓名" prop="memberName" align="center"></el-table-column> <el-table-column label="岗位" prop="post" align="center"></el-table-column> </el-table-column> <el-table-column label="出勤天数" prop="attendanceDays" align="center"></el-table-column> <el-table-column label="岗位系数" prop="postFactor" align="center"></el-table-column> <el-table-column label="调整系数" align="center"> <template slot-scope="scope"> <div> <el-input-number v-model="scope.row.adjustFactor" :precision="2" :step="0.01" :max="0.15" :min="-0.15" size="small" @change="changeFinal(scope.row)" ></el-input-number> </div> </template> </el-table-column> <el-table-column label="最终考勤天数" prop="finalDavs"></el-table-column> </el-table> <div class="membersDays"> <span>合计</span> <span>{{membersDaysJs}}</span>天 </div>
根据您的代码,我发现您的计算属性名为`membersDaysJs`,但是在模板中使用时没有加上括号`()`,因此无法正确调用这个计算属性。您需要将`{{membersDaysJs}}`修改为`{{membersDaysJs()}}`。这应该可以解决computed不生效的问题。
所以,您的模板应该是这样的:
```
<el-table :data="membersList" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
<div class="membersDays">
<span>合计</span>
<span>{{membersDaysJs()}}</span>天
</div>
```
<el-table :data=‘table__.slice(0,20)’> <el-table-column prop=“name”></el-table-column> </el-table>如何为显示的数据name 添加复选框和el-input-number
要在 `<el-table>` 中为显示的 `name` 列添加复选框和 `el-input-number`,你可以使用 `<el-table-column>` 的 `slot` 属性来自定义列的内容。以下是一个示例代码,展示了如何实现这一功能:
```html
<el-table :data="tableData.slice(0, 20)">
<el-table-column label="Select">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<el-input-number v-model="scope.row.quantity" :min="1" :max="10"></el-input-number>
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
```
在这个示例中:
1. 第一个 `<el-table-column>` 添加了一个复选框列,使用 `el-checkbox` 组件,并通过 `v-model` 绑定到每一行的 `selected` 属性。
2. 第二个 `<el-table-column>` 显示 `name` 属性,并在其中添加了一个 `el-input-number` 组件,通过 `v-model` 绑定到每一行的 `quantity` 属性。
确保你的数据对象中包含 `selected` 和 `quantity` 属性,例如:
```javascript
data() {
return {
tableData: [
{ name: 'Item 1', selected: false, quantity: 1 },
{ name: 'Item 2', selected: false, quantity: 1 },
// ... 其他数据项
]
};
}
```
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045021.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)