经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Vue中遍历数组的新方法
来源:cnblogs  作者:稻火  时间:2019/7/22 10:45:05  对本文有异议

1、foreach

  foreach循环对不能使用return来停止循环

  1. 1 search(keyword){
  2. 2 var newList = []
  3. 3 this.urls.forEach(item =>{
  4. 4 if(item.name.indexOf(keyword) != -1){
  5. 5 newList.push(item)
  6. 6 }
  7. 7 })
  8. 8 return newList
  9. 9 }

2、filter

  item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组

  1. 1 search(keyword){
  2. 2 return this.urls.filter(item =>{
  3. 3 if(item.name.includes(keyword)){
  4. 4 return item
  5. 5 }
  6. 6 })
  7. 7 }

 

3、findIndex

  返回true后index就可以获取到匹配的元素在进行删除

  1. del(row){
  2. this.$confirm("确定要删除吗?", "删除").then(action=>{
  3. var index = this.urls.findIndex(item =>{
  4. if(item.name == row.name){
  5. return true;
  6. }
  7. })
  8. this.urls.splice(index, 1)
  9. });

 

4、some

  如果匹配成功就return true跳出some的循环

  1. del(row){
  2. this.$confirm("确定要删除吗?", "删除").then(action=>{
  3. this.urls.some((item, i) =>{
  4. if(item.name == row.name){
  5. this.urls.splice(i, 1)
  6. return true;
  7. }
  8. })
  9. });
  10. }

 

5、上例子,在一个vue的data中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能

  在el-table中 :data中绑定一个方法,方法中对固定的数组urls进行遍历,返回一个新的数组实现搜索功能

  1. <template>
  2. <div>
  3. <label style="float: left;">
  4. 搜索关键字:
  5. <input type="text" class="form-control" v-model="keyword">
  6. </label>
  7. <el-table :data="search(keyword)" size="small" :stripe="true" :border="true" @select="select" @select-all="select">
  8. <el-table-column type="selection"></el-table-column>
  9. <el-table-column type="index"></el-table-column>
  10. <el-table-column label="网站名" prop="name" width="200">
  11. <template slot-scope="slot">
  12. <a href="slot.row.url" target="_blank">{{slot.row.name}}</a>
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="网址" prop="url"></el-table-column>
  16. <el-table-column label="类型" prop="type" width="50"></el-table-column>
  17. <el-table-column label="国家" prop="country" width="50"></el-table-column>
  18. <el-table-column label="操作" width="50">
  19. <template slot-scope="slot">
  20. <el-button size="mini" type="text" icon="el-icon-delete" @click="del(slot.row)"></el-button>
  21. </template>
  22. </el-table-column>
  23. </el-table>
  24. <el-divider content-position="left">表格操作</el-divider>
  25. <el-button @click="batchDelete" type="danger" icon="el-icon-delete" size="small">批量删除</el-button>
  26. </div>
  27. </template>
  28.  
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. keyword:'',
  34. selections: [],
  35. urls: [{
  36. name: "新浪",
  37. url: "http://www.sina.com",
  38. type: "资讯",
  39. country: "中国"
  40. },
  41. {
  42. name: "腾讯",
  43. url: "http://www.tencent.com",
  44. type: "聊天",
  45. country: "中国"
  46. },
  47. {
  48. name: "谷歌",
  49. url: "http://www.google.com",
  50. type: "资讯",
  51. country: "美国"
  52. },
  53. {
  54. name: "韬睿",
  55. url: "http://www.51i-star.com",
  56. type: "教育",
  57. country: "中国"
  58. }
  59. ]
  60. };
  61. },
  62. methods: {
  63. del(row){
  64. this.$confirm("确定要删除吗?", "删除").then(action=>{
  65. /* this.urls.some((item, i) =>{
  66. if(item.name == row.name){
  67. this.urls.splice(i, 1)
  68. return true;
  69. }
  70. }) */
  71. var index = this.urls.findIndex(item =>{
  72. if(item.name == row.name){
  73. return true;
  74. }
  75. })
  76. this.urls.splice(index, 1)
  77. });
  78. },
  79. select(selections, row) {
  80. this.selections = selections;
  81. },
  82. batchDelete() {
  83. this.$confirm("确定要删除吗?", "删除")
  84. .then(action => {
  85. for (var i = this.urls.length - 1; i >= 0; i--) {
  86. for (var j = this.selections.length - 1; j >= 0; j--) {
  87. if (this.urls[i].name == this.selections[j].name) {
  88. this.urls.splice(i, 1);
  89. break;
  90. }
  91. }
  92. }
  93. })
  94. .catch(error => {
  95. alert(error);
  96. this.$message('删除取消');
  97. });
  98. },
  99. search(keyword){
  100. /* var newList = []
  101. this.urls.forEach(item =>{
  102. if(item.name.indexOf(keyword) != -1){
  103. newList.push(item)
  104. }
  105. })
  106. return newList */
  107. return this.urls.filter(item =>{
  108. if(item.name.includes(keyword)){
  109. return item
  110. }
  111. })
  112. }
  113. }
  114. }
  115. </script>
  116.  
  117. <style>
  118.  
  119. </style>

6、效果图为

原文链接:http://www.cnblogs.com/liuzhengkun/p/11216966.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号