iview的表格组件中使用下拉框 并且首次加载选中第一项
时间: 2024-03-19 09:43:47 浏览: 22
在iView的表格组件中使用下拉框,需要在表格中的列中使用自定义渲染函数来渲染下拉框。在自定义渲染函数中,我们可以使用iView提供的Select组件来实现下拉框,并且在组件中通过v-model绑定数据,使得选中的值可以被我们获取到。下面是一个简单的示例代码:
```html
<template>
<Table :columns="columns" :data="tableData"></Table>
</template>
<script>
import { Table, Select, Option } from 'iview';
export default {
data() {
return {
tableData: [
{ name: 'John', age: 18, gender: 'male' },
{ name: 'Lucy', age: 20, gender: 'female' },
{ name: 'Mike', age: 25, gender: 'male' },
],
columns: [
{
title: '姓名',
key: 'name',
},
{
title: '年龄',
key: 'age',
},
{
title: '性别',
key: 'gender',
render: (h, params) => {
const gender = params.row.gender;
return h(Select, {
props: {
value: gender,
},
on: {
'on-change': value => {
params.row.gender = value;
},
},
}, [
h(Option, { props: { value: 'male' } }, '男'),
h(Option, { props: { value: 'female' } }, '女'),
]);
},
},
],
};
},
};
</script>
```
在上面的代码中,我们使用了Select和Option组件来实现下拉框,其中Select组件通过v-model绑定到了当前行对应的gender值,这样就可以选中默认值了。