在 vue-cli3.X 中自定义表格复选框全选、反选和单选

最新推荐文章于 2024-04-20 16:06:24 发布

itBellah

最新推荐文章于 2024-04-20 16:06:24 发布

阅读量779

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/candyhzhou/article/details/105631945

版权

本文介绍了在 Vue-cli3.x 项目中如何实现表格复选框的全选、反选和单选功能。通过分析需求，展示了具体的效果图，并提供了详细的代码实现步骤。

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

1\ 需求分析

选中表头中的复选框按钮，则表格中对应的每个子项都被选中
表头中的复选框按钮选中后又取消选中，则表格中对应的每个子项都不被选中
表格子项中的复选框状态全都相同，则全选按钮为对应的状态类型

2\ 效果图展示
全选和单选
3\ 代码实现

<!-- 页面 -->
<template>
	<div class="table-list">
	   <div class="table-head">
	     <table>
	       <colgroup>
	         <col style="width: 50px" />
	         <col style="width: 80px" />
	         <col />
	       </colgroup>
	       <thead>
	         <tr>
	           <td style="