iview table 表格中添加下拉选择框
时间: 2024-03-05 16:55:04 浏览: 108
要在 iview table 表格中添加下拉选择框,你可以使用 iview 中提供的 Select 组件。
首先,你需要在表格的列定义中添加一个 render 函数,在这个函数中返回一个包含 Select 组件的对象。例如:
```javascript
{
title: '状态',
key: 'status',
render: (h, params) => {
return h('Select', {
props: {
value: params.row.status,
clearable: true
},
on: {
'on-change': (value) => {
params.row.status = value;
}
}
}, [
h('Option', {
props: {
value: '0'
}
}, '未完成'),
h('Option', {
props: {
value: '1'
}
}, '已完成')
]);
}
}
```
这个例子中,我们在表格的状态列中添加了一个 Select 组件。在 Select 组件的 props 中,我们指定了当前选中的值和是否可清除。在 on-change 事件中,我们监听了选择框的变化,并将选择框的值赋值给数据源中对应的状态属性。在 Select 组件的 children 中,我们添加了两个 Option 组件,分别代表未完成和已完成两个选项。
最后,记得在表格中引入 Select 组件:
```javascript
import { Table, Select } from 'iview';
export default {
components: {
Table,
Select
},
// ...
}
```
阅读全文