前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue实现表格组件(实现多选功能)

vue实现表格组件(实现多选功能)

作者头像
陨石坠灭
发布2020-01-21 15:42:46
1.2K0
发布2020-01-21 15:42:46
举报
文章被收录于专栏:全栈之路

其中多选功能参考:https://jsfiddle.net/muchen/7r358jmu/2/

来个效果

名称|年龄|性别 –|–|– 张三|11|男 李四|12|女 王五|13|-

当然,上诉只是要实现的效果,还要再加上多选功能

浅谈表格

表格组件比较没有技术含量,主要掌握vue的v-for的使用就可以了,但是多选功能却比较复杂,然而这个复杂的问题却被上述网址所展示的代码优雅的解决了,所以这个组件会是一个非常值得学习的代码

主要讲多选哈,其他的就带过了

多选功能

https://segmentfault.com/q/1010000006893364?_ea=1172273里面的回答,其原理:

  1. 给每个数据增加一个属性,selected
  2. 在 computed 里面增加一个 allSelected 的计算属性
  3. 定义该属性的 get & set
  4. 把allSelected 绑定到 thead 的 checkbox 上

实现的效果:

  1. tbody 里面每行都选中,thead checkbox自动选中
  2. thead checkbox选中状态下 tbody某一行不选择,thead 选中自动取消
  3. thead checkbox点击选中,tbody所有行选中
  4. thead checkbox点击取消选中 tbody所有行不选中

好了,上诉文字都是抄袭,还得来点真货,是自己修改而成的:

template

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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>

父组件调用

代码语言:javascript
复制
...
<Table :fields="fields" :rows="rows" :mulSelect="mulSelect" />
...

以下代码是必须的:

代码语言:javascript
复制
<script>
import Table from '@/components/Table'
...
components:{
    "Table":Table
}
...

好困呐,还落下什么呢?对了,还有张三和李四:

代码语言:javascript
复制
//数据格式
const fields = [
    {name:"姓名"},{name:"年龄",name"性别"}
]
const rows=[
    {"姓名":"张三","年龄":11,"性别":"男"},
    {"姓名":"李四","年龄":2,"性别":"女"},
    {"姓名":"王五","年龄":13,"性别":"-"}
]

该睡了。。。



另外,分页组件,请查看本人另一篇文章vue实现分页组件

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/09/02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 来个效果
  • 浅谈表格
  • 多选功能
    • template
      • script
        • css
          • 父组件调用
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档