HTML--嵌套列表实例—我的菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的菜单</title>
</head>
<body>
    <table border="1" cellpadding="30">
        <tr>
            <td>
                <ul>
                    <li>Fuilt</li>
                    <ol>
                        <li>苹果:2$</li>
                        <li>香蕉:3$</li>
                        <li>:6</li>
                        <li>菠萝:5💴</li>
                    </ol>
                    <li>Food</li>
                    <ol>
                        <li>馒头</li>
                        <li>米饭</li>
                        <li>红烧肉</li>
                        <li>鲍鱼</li>
                    </ol>
                    <li></li>
                    <ol>
                        <li>米汤</li>
                        <li>紫菜汤</li>
                        <li>鸡蛋汤</li>
                        <li>米酒</li>
                    </ol>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table是Element UI中的一个表格组件,可以用于展示数据。如果要在el-table的行里嵌套按钮,可以通过自定义列的方式来实现。 首先,你需要在el-table的columns属性中定义一个自定义列,该列可以包含按钮组件。例如,你可以使用el-button组件作为按钮。 ```html <el-table :data="tableData" border> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="handleClick(scope.row)">编辑</el-button> <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> ``` 在上面的代码中,我们定义了一个自定义列,使用了slot-scope来获取当前行的数据。然后,在template标签中,我们可以使用el-button组件来创建按钮,并绑定对应的点击事件。 接下来,你需要在Vue实例中定义对应的方法来处理按钮的点击事件。 ```javascript methods: { handleClick(row) { // 编辑按钮点击事件处理逻辑 console.log('编辑', row); }, handleDelete(row) { // 删除按钮点击事件处理逻辑 console.log('删除', row); } } ``` 在上面的代码中,我们定义了handleClick和handleDelete两个方法来处理编辑和删除按钮的点击事件。你可以根据实际需求来编写对应的逻辑。 这样,当你在el-table的行里嵌套按钮后,点击按钮时就会触发对应的事件处理方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值