记录一下vue的问题,往表格中添加数据并且动态渲染下拉框的数据

this.tableData.push(你的后台请求的数据);

如果你要往表格的下拉框动态添加数据,页面写法如下

<form id="vueForm">
    <div>
        帐单编号:&nbsp;&nbsp;&nbsp;&nbsp;<el-input id="billRefNo" style="width: 200px;" v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary" round @click="getTuoShou()">查询托收帐单</el-button>
    </div>
    <template>
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" show-summary @selection-change="handleSelectionChange">
            <el-table-column
                    type="index"
                    sortable
                    width="50">
            </el-table-column>
            <el-table-column prop="billRefNo" label="帐单编号" sortable width="180"></el-table-column>
            <el-table-column prop="amount" label="金额" sortable width="100"></el-table-column>
            <el-table-column label="请选择" width="180">
                <template #default="{row}">
                    <el-select v-model="row.value" @change="changeRole">
                        <el-option v-for="item in row.selectValueList"
                                :key="item.responseCode"
                                :label="item.displayValue"
                                :value="item.responseCode">

                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="custBankAccName" label="客户户名" sortable width="150"></el-table-column>
            <el-table-column prop="telBankAcct" label="客户账号" sortable width="200"></el-table-column>
            <el-table-column prop="acctId" label="分账序号" sortable width="180"></el-table-column>
            <el-table-column prop="statusCd" label="托收状态" sortable width="180"></el-table-column>
            <el-table-column prop="remark" label="备注" width="180">
                <template #default="{row}">
                    <el-input
                            type="textarea"
                            :rows="1"
                            placeholder="请输入内容"
                            v-model="row.textarea">
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="danger" plain @click="submit">退票返销帐</el-button>
    </template>
</form>

vue添加数据的方法如下,object.assign的用法自行百度
response.data.bankAgentSendModels[0]是我后台请求的表格数据
response.data.eftResponseCodeRefModel是我后台请求的下拉框数据
selectValueList 我要遍历的集合名字
value 看一下表格,我给下拉框的model加了value

this.tableData.push(Object.assign(response.data.bankAgentSendModels[0],{value:'',selectValueList:response.data.eftResponseCodeRefModel}));

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Ant Design Vue 的可编辑表格使用下拉框,可以使用 Select 组件。首先,你需要在表格的列定义配置一个编辑器,通过 render 函数返回一个 Select 组件。 以下是一个简单的示例代码: ```vue <template> <a-table :data-source="dataSource" :columns="columns"> <!-- 其他列定义 --> <template #action="{ text, record }"> <a @click="startEditing(record.key)">编辑</a> </template> </a-table> </template> <script> import { ref } from 'vue'; import { Table, Select, Button, Popconfirm } from 'ant-design-vue'; export default { components: { Table, Select, Button, Popconfirm, }, setup() { const dataSource = ref([ { key: 1, name: 'John', age: 32, city: 'New York' }, { key: 2, name: 'Alice', age: 28, city: 'London' }, // 其他数据 ]); const columns = [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'City', dataIndex: 'city', customRender: ({ text, record, index }) => { const editing = ref(false); const selectedCity = ref(record.city); const startEditing = (key) => { editing.value = true; }; const handleSave = () => { // 处理保存逻辑,比如更新数据源、发送请求等 editing.value = false; }; return editing.value ? ( <Select v-model={[selectedCity.value, 'value']}> <a-select-option value="New York">New York</a-select-option> <a-select-option value="London">London</a-select-option> <a-select-option value="Paris">Paris</a-select-option> </Select> ) : ( <span>{text}</span> ); }, }, { title: 'Action', key: 'action', customRender: ({ record }) => ( <span> <a-button type="link" onClick={() => startEditing(record.key)}> Edit </a-button> <a-popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)} > <a-button type="link">Delete</a-button> </a-popconfirm> </span> ), }, ]; return { dataSource, columns, }; }, }; </script> ``` 在上面的示例,`columns` 数组定义了表格的列,其 City 列使用了自定义渲染函数 `customRender` 来渲染下拉框编辑器。当点击编辑按钮时,下拉框会显示为可编辑状态,用户可以选择不同的选项。点击保存按钮后,可以处理保存逻辑,比如更新数据源、发送请求等。 这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!如有任何疑问,请随时询问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值