Vue中表单控件（实现多选/反选、删除、单选功能）

最新推荐文章于 2024-03-06 18:00:00 发布

ZHANGJIN9546

最新推荐文章于 2024-03-06 18:00:00 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签： Vue中表单控件（实现多选/反选、删除、单选功能）

本文链接：https://blog.csdn.net/zhangjin9546/article/details/96199635

版权

本文介绍了如何在Vue中利用组件实现表单控件的多选、反选和删除功能，包括单选操作，详细阐述了相关组件的设计与交互逻辑。

摘要由CSDN通过智能技术生成

Vue中表单控件（实现多选/反选、删除、单选功能）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选/反选</title>
    <style>
        /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
      [v-cloack]{
      	display:none;
      }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#666666">
        <tr align="center">
            <td bgcolor="#FFFFFF" height="40" width="10%"><label @click="allSelect()">全选<input type="checkbox" ></label></td>
            <td bgcolor="#FFFFFF">id</td>
            <td bgcolor="#FFFFFF">姓名</td>
            <td bgcolor="#F