vue实现表格组件(实现多选功能)
时间:2022-06-13
本文章向大家介绍vue实现表格组件(实现多选功能),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
其中多选功能参考:https://jsfiddle.net/muchen/7r358jmu/2/
来个效果
名称|年龄|性别 –|–|– 张三|11|男 李四|12|女 王五|13|-
当然,上诉只是要实现的效果,还要再加上多选功能
浅谈表格
表格组件比较没有技术含量,主要掌握vue的v-for
的使用就可以了,但是多选功能却比较复杂,然而这个复杂的问题却被上述网址所展示的代码优雅的解决了,所以这个组件会是一个非常值得学习的代码
主要讲多选哈,其他的就带过了
多选功能
如https://segmentfault.com/q/1010000006893364?_ea=1172273里面的回答,其原理:
- 给每个数据增加一个属性,selected
- 在 computed 里面增加一个 allSelected 的计算属性
- 定义该属性的 get & set
- 把allSelected 绑定到 thead 的 checkbox 上
实现的效果:
- tbody 里面每行都选中,thead checkbox自动选中
- thead checkbox选中状态下 tbody某一行不选择,thead 选中自动取消
- thead checkbox点击选中,tbody所有行选中
- thead checkbox点击取消选中 tbody所有行不选中
好了,上诉文字都是抄袭,还得来点真货,是自己修改而成的:
template
<template>
<div class="mtable">
<table class="table" >
<thead>
<th v-if="mulSelect" >
<div><input type="checkbox" v-model="allSelected" /></div>
</th>
<th v-for="field in fields" >
{{field.name}}
</th>
</thead>
<tbody>
<tr v-for="data,index in rows" >
<td v-if="mulSelect" >
<div><input type="checkbox" v-model="items[index].seleced" /></div>
</td>
<td v-for="field in fields" >
{{data[field.name]}}
</td>
</tr>
</tbody>
</table>
</div>
</template>
其中mulSelect,rows,field是父组件传递的参数,mulSelect用来控制是否显示多选,rows是json格式的数据,fields包含有属性名称
script
<script>
function getItems(){
var items = [];
for(var i=0;i<100;i++){//定义支持最大行数为100行
items.push({
seleced:false
})
}
return items
}
const ITEMS = getItems()
export default {
name: 'Table',
data(){
return {
"items":ITEMS
}
},
props:[
"fields","rows","mulSelect"
],
computed:{
allSelected:{
get: function () {
return this.items.reduce(function(prev, curr) {
return prev && curr.seleced;
},true);
},
set: function (newValue) {
this.items.forEach(function(item){
item.seleced = newValue;
});
}
}
}
}
</script>
其中getItems可以看出,只支持100行,有需要的话可以自行调整,废话不多说了,上样式:
css
<style>
table.table{
margin: 0 auto;
empty-cells:show;
border-collapse: collapse;
width: 100%;
}
.table tr{
}
.mtable{
width: 100%;
max-height: 450px;
overflow: auto;
}
.table td,.table th{
border: 1px #eee solid;
height: 30px;
line-height: 30px;
min-width: 64px;
overflow: hidden;
}
.table tr td:first-child,.table thead th:first-child{
width: 32px;
padding: 0px;
}
.table input[type=checkbox]{
zoom: 180%;
margin-top: 8px;
}
</style>
父组件调用
...
<Table :fields="fields" :rows="rows" :mulSelect="mulSelect" />
...
以下代码是必须的:
<script>
import Table from '@/components/Table'
...
components:{
"Table":Table
}
...
好困呐,还落下什么呢?对了,还有张三和李四:
//数据格式
const fields = [
{name:"姓名"},{name:"年龄",name"性别"}
]
const rows=[
{"姓名":"张三","年龄":11,"性别":"男"},
{"姓名":"李四","年龄":2,"性别":"女"},
{"姓名":"王五","年龄":13,"性别":"-"}
]
该睡了。。。
另外,分页组件,请查看本人另一篇文章vue实现分页组件
- “单播”、“组播”和“多播”
- flash player10.1 + FMS4中的p2p功能
- fms4 p2p:图片分享
- 老域名新用的优缺点分析
- 不用临时变量,交换二个整型变量的值
- monoTouch开发(1):win7 + vmware下安装mac os
- 数据结构C#版笔记--队列(Quene)
- 数据结构C#版笔记--堆栈(Stack)
- MySQL基础入门-第一课 新建数据库(linux版本)
- 2017年度最不安全密码报告,看看你的密码安全吗?
- 数据结构C#版笔记--顺序表(SeqList)
- 数据结构C#版笔记--单链表(LinkList)
- 操作系统 页式存储 页与块之间的关系详解
- 数据结构C#版笔记--双向链表(DbLinkList)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php适配器模式简单应用示例
- Python 解析简单的XML数据
- Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
- Python分类测试代码实例汇总
- Swoole 5将移除自动添加Event::wait()特性详解
- laravel 数据验证规则详解
- JS操作XML中DTD介绍及使用方法分析
- PHP设计模式之迭代器(Iterator)模式入门与应用详解
- PHP FileSystem 文件系统常用api整理总结
- laravel框架之数据库查出来的对象实现转化为数组
- php apache开启跨域模式过程详解
- laravel5.6实现数值转换
- python中return不返回值的问题解析
- php装饰者模式简单应用案例分析
- php常用日期时间函数实例小结