动态创建table并实现table的嵌套

            if (odr.Read())
            {
                Table tbmain = new Table();
                //Table tbleft = new Table();
                Table tbright = new Table();
               
                TableRow trm = new TableRow();
                TableCell tcm1 = new TableCell();
                tcm1.VerticalAlign = VerticalAlign.Top;
                TableCell tcm2 = new TableCell();

                for (int i = 0; i < 6; i++)
                {
                    TableCell tc = new TableCell();
                    TableRow tr = new TableRow();
                    tc.Text = odr[i].ToString();
                    tc.Height = 21;
                    tr.Cells.Add(tc);
                    tbright.Rows.Add(tr);
                }
                TableCell tcarea = new TableCell();
                TableRow trarea = new TableRow();
                TextArea1.Value = odr["ma_content"].ToString();
                tcarea.Controls.Add(TextArea1);
                trarea.Cells.Add(tcarea);
                tbright.Rows.Add(trarea);
                //HyperLink1.NavigateUrl = "<a href='" + odr["er_url"].ToString() + odr["er_name"].ToString()  + "'>附件下载</a>";
                tcm1.Controls.Add(tbleft);
                tbmain.BorderWidth = 1;
                tcm2.Controls.Add(tbright);
                trm.Cells.Add(tcm1);
                trm.Cells.Add(tcm2);
                tbmain.Rows.Add(trm);
                form1.Controls.Add(tbmain);
 

在Vue.js中,如果你想实现一个Select下拉框嵌套在表格(Table)中,通常是为了创建动态选项列表,可以根据上一级选择影响到下一级的数据展示。这里是一个基本的示例: 1. 首先,你需要创建两个数据数组,一个是顶层的选项,另一个用于存储每个顶级选项对应的子选项。假设我们有一个部门列表和对应员工列表。 ```javascript data() { return { departments: [ { id: '1', name: 'IT', employees: [] }, { id: '2', name: '销售', employees: [] } ], selectedDepartmentId: '' }; } ``` 2. 定义一个计算属性`filteredEmployees`来过滤并显示子级选项,根据当前选中的部门ID。 ```javascript computed: { filteredEmployees() { return this.departments.map(department => ({ ...department, employees: department.id === this.selectedDepartmentId ? department.employees : [] })); } }, methods: { selectDepartment(id) { this.selectedDepartmentId = id; } } ``` 3. 在HTML模板部分,你可以使用v-for遍历`departments`,并将`filteredEmployees`作为表格的源数据。 ```html <template> <div> <select v-model="selectedDepartmentId" @change="selectDepartment"> <option v-for="department in departments" :value="department.id">{{ department.name }}</option> </select> <table> <thead> <!-- 表头 --> </thead> <tbody> <tr v-for="(department, index) in filteredEmployees" :key="index"> <td>{{ department.name }}</td> <td> <select v-model="department.employees[0]" @change="updateEmployee(index)"> <option v-for="employee in department.employees" :value="employee.id">{{ employee.name }}</option> </select> </td> </tr> </tbody> </table> </div> </template> ``` 4. `updateEmployee`方法可以处理员工的选择变化,但这取决于你的业务需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值