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

其中多选功能参考: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


其中mulSelect,rows,field是父组件传递的参数,mulSelect用来控制是否显示多选,rows是json格式的数据,fields包含有属性名称

script


其中getItems可以看出,只支持100行,有需要的话可以自行调整,废话不多说了,上样式:

css



父组件调用

...

...

以下代码是必须的:


                    
                    

你可能感兴趣的:(vue实现表格组件(实现多选功能))