el-tabale 多选添加分页默认选中

101 阅读 0 评论 67 点赞

我是靠谱客的博主耍酷发夹，这篇文章主要介绍el-tabale 多选添加分页默认选中，现在分享给大家，希望可以做个参考。

这里写目录标题

- - - el-tabale 多选添加分页默认选中
    - - 1. 子组件 `initData` 初始化获取数据之后通过 `this.$nexttick(()=>{})` 对 `el-table` 进行默认选中。当前选中的项包括三部分：
      - 2. 需要吧这三项进行合并去重，存储到 `currentSelect` . 然后根据 `el-table` 当前页的数据过滤后默认选中。默认选中会刷新 `selectionGoodsList` 为当前页面选中的数据。
      - 3. 确认选中的时候就更新所有的选中项 `currentSelect` 。就OK了，因为我的是 `dialog` 添加的。所以用了 `.sync` 。
    - 组件的使用和源码

el-tabale 多选添加分页默认选中

使用el-table进行多选添加，要求:已经添加的选项默认选中；可以多选进行添加；表格可搜索、可分页。

组建封装逻辑：father 组件通过 props 传参，传递已选中的 selectionGoods，.sync 修饰方便更新数据。

1. 子组件 `initData` 初始化获取数据之后通过 `this.$nexttick(()=>{})` 对 `el-table` 进行默认选中。当前选中的项包括三部分：

el-table 当前页选中项。–> selectionGoodsList

复制代码

1
2
3
4
5
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectionGoodsList = selection
    }

father 组件通过 props 传递进来的已添加项。 --> selectionGoods

复制代码

1
2
 <AssociatedGoods :visible.sync="showGoodsDialog" :selectionGoods.sync="associatedGoods"></AssociatedGoods>

临时存储所有的选中项（已选中项，当前页新增的选中项）。 --> currentSelect

2. 需要吧这三项进行合并去重，存储到 `currentSelect` . 然后根据 `el-table` 当前页的数据过滤后默认选中。默认选中会刷新 `selectionGoodsList` 为当前页面选中的数据。

切换界面的时候需要刷新当前页的选中项每一次刷新当前页的选中项上一页的选中项就会丢失。所以我们在进行默认选中之前把所有的选中的项合并去重更新到 currentSelect 临时存储了起来。之后再进行新页面的默认选中行为。就不会丢失新增的选中项了。

代码片段1：

复制代码

//初始化
    initData() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.getGoodsList()
    },
    //获取table数据
    async getGoodsList() {
      this.loading = true
      const params = {
        name: this.name,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      const response = await listAppGoods(params)
      this.goodsList = response.rows
      this.total = response.total
      this.loading = false
      this.defaultSelectionGoods()
    },
    //默认选中
    defaultSelectionGoods() {
      let selection = []
      //合并所有选中项  进行存储
      this.currentSelect = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      //过滤出当前页 可进行选中的项
      this.currentSelect.forEach(item => {
        const select = this.goodsList.filter(ele => {
          return item.id == ele.id
        })
        if (select.length > 0) {
          selection.push(...select)
        }
      })
      //进行默认选中。必须使用 $nexttick
      this.$nextTick(() => {
        selection.forEach(item => {
          this.$refs.dataTable.toggleRowSelection(item, true)
        })
      })
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
    //初始化
    initData() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.getGoodsList()
    },
    //获取table数据
    async getGoodsList() {
      this.loading = true
      const params = {
        name: this.name,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      const response = await listAppGoods(params)
      this.goodsList = response.rows
      this.total = response.total
      this.loading = false
      this.defaultSelectionGoods()
    },
    //默认选中
    defaultSelectionGoods() {
      let selection = []
      //合并所有选中项  进行存储
      this.currentSelect = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      //过滤出当前页 可进行选中的项
      this.currentSelect.forEach(item => {
        const select = this.goodsList.filter(ele => {
          return item.id == ele.id
        })
        if (select.length > 0) {
          selection.push(...select)
        }
      })
      //进行默认选中。必须使用 $nexttick
      this.$nextTick(() => {
        selection.forEach(item => {
          this.$refs.dataTable.toggleRowSelection(item, true)
        })
      })
    },

3. 确认选中的时候就更新所有的选中项 `currentSelect` 。就OK了，因为我的是 `dialog` 添加的。所以用了 `.sync` 。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 // 确认关联商品
    handleSubmit() {
      //商品原有的标签是否进行合并
      // const endList = [
      //   ...this.selectionGoods,
      //   ...this.selectionGoodsList
      // ]
      //
      // let newArr = [endList[0]]
      // let arrId = [endList[0].id]
      // for (let i = 1; i < endList.length; i++) {
      //   if (arrId.indexOf(endList[i].id) === -1) {
      //     newArr.push(endList[i])
      //     arrId.push(endList[i].id)
      //   }
      // }
      const newArr = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      this.$emit('update:selectionGoods', newArr)
      this.cancel()
    },

组件的使用和源码

复制代码

1
2
 <AssociatedGoods :visible.sync="showGoodsDialog" :selectionGoods.sync="associatedGoods"></AssociatedGoods>

复制代码

<el-row :gutter="10" style="display: flex;align-items: center;justify-content: flex-start">
      <el-col :span="3">商品名称：</el-col>
      <el-col :span="8">
        <el-input v-model="name" placeholder="请输入商品名称" @keydown.enter.native="searchGoods"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="searchGoods">搜索</el-button>
      </el-col>
    </el-row>
    <div style="height: 20px"></div>
    <el-table
      ref="dataTable"
      v-loading="loading"
      :data="goodsList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>

<el-table-column label="商品图片" align="center" prop="name">
        <template v-slot="scope">
          <img
            width="60px"
            height="60px"
            :src="
              scope.row.appGoodsImgList.length > 0
                ? scope.row.appGoodsImgList[0].img
                : ''
            "
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="name"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 50, 100,200]"
      :page-size="pageSize"
      :total="total"
    >
    </el-pagination>

export default {
  name: 'AssociatedGoods',
  props: {
    visible: {
      type: Boolean,
      default: () => false,
      require: true
    },
    selectionGoods: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentSelect: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      goodsList: [],
      selectionGoodsList: [],
      name: '',
      loading: false
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getGoodsList()
    },
    defaultSelectionGoods() {
      let selection = []
      this.currentSelect = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      this.currentSelect.forEach(item => {
        const select = this.goodsList.filter(ele => {
          return item.id == ele.id
        })
        if (select.length > 0) {
          selection.push(...select)
        }
      })
      this.$nextTick(() => {
        selection.forEach(item => {
          this.$refs.dataTable.toggleRowSelection(item, true)
        })
      })
    },
    initData() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.getGoodsList()
    },
    searchGoods() {
      this.pageNum = 1
      this.getGoodsList()
    },
    async getGoodsList() {
      this.loading = true
      const params = {
        name: this.name,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      const response = await listAppGoods(params)
      this.goodsList = response.rows
      this.total = response.total
      this.loading = false
      this.defaultSelectionGoods()
    },
    cancel() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.$emit('update:visible', false)
    },
    // 确认关联商品
    handleSubmit() {
      //商品原有的标签是否进行合并
      // const endList = [
      //   ...this.selectionGoods,
      //   ...this.selectionGoodsList
      // ]
      //
      // let newArr = [endList[0]]
      // let arrId = [endList[0].id]
      // for (let i = 1; i < endList.length; i++) {
      //   if (arrId.indexOf(endList[i].id) === -1) {
      //     newArr.push(endList[i])
      //     arrId.push(endList[i].id)
      //   }
      // }
      const newArr = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      this.$emit('update:selectionGoods', newArr)
      this.cancel()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectionGoodsList = selection
    }

}
}
</script>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    width="900px"
    append-to-body
    @opened="initData"
  >

    <el-row :gutter="10" style="display: flex;align-items: center;justify-content: flex-start">
      <el-col :span="3">商品名称：</el-col>
      <el-col :span="8">
        <el-input v-model="name" placeholder="请输入商品名称" @keydown.enter.native="searchGoods"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="searchGoods">搜索</el-button>
      </el-col>
    </el-row>
    <div style="height: 20px"></div>
    <el-table
      ref="dataTable"
      v-loading="loading"
      :data="goodsList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>

      <el-table-column label="商品图片" align="center" prop="name">
        <template v-slot="scope">
          <img
            width="60px"
            height="60px"
            :src="
              scope.row.appGoodsImgList.length > 0
                ? scope.row.appGoodsImgList[0].img
                : ''
            "
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="name"/>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 50, 100,200]"
      :page-size="pageSize"
      :total="total"
    >
    </el-pagination>

    <p slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </p>
  </el-dialog>
</template>

<script>
import { listAppGoods } from '@/api/goods/AppGoods'

export default {
  name: 'AssociatedGoods',
  props: {
    visible: {
      type: Boolean,
      default: () => false,
      require: true
    },
    selectionGoods: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentSelect: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      goodsList: [],
      selectionGoodsList: [],
      name: '',
      loading: false
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getGoodsList()
    },
    defaultSelectionGoods() {
      let selection = []
      this.currentSelect = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      this.currentSelect.forEach(item => {
        const select = this.goodsList.filter(ele => {
          return item.id == ele.id
        })
        if (select.length > 0) {
          selection.push(...select)
        }
      })
      this.$nextTick(() => {
        selection.forEach(item => {
          this.$refs.dataTable.toggleRowSelection(item, true)
        })
      })
    },
    initData() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.getGoodsList()
    },
    searchGoods() {
      this.pageNum = 1
      this.getGoodsList()
    },
    async getGoodsList() {
      this.loading = true
      const params = {
        name: this.name,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      const response = await listAppGoods(params)
      this.goodsList = response.rows
      this.total = response.total
      this.loading = false
      this.defaultSelectionGoods()
    },
    cancel() {
      this.name = ''
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
      this.currentSelect = []
      this.selectionGoodsList = []
      this.$emit('update:visible', false)
    },
    // 确认关联商品
    handleSubmit() {
      //商品原有的标签是否进行合并
      // const endList = [
      //   ...this.selectionGoods,
      //   ...this.selectionGoodsList
      // ]
      //
      // let newArr = [endList[0]]
      // let arrId = [endList[0].id]
      // for (let i = 1; i < endList.length; i++) {
      //   if (arrId.indexOf(endList[i].id) === -1) {
      //     newArr.push(endList[i])
      //     arrId.push(endList[i].id)
      //   }
      // }
      const newArr = [...new Set([...this.currentSelect, ...this.selectionGoods, ...this.selectionGoodsList])]
      this.$emit('update:selectionGoods', newArr)
      this.cancel()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectionGoodsList = selection
    }

  }
}
</script>

<style scoped>

</style>

最后

以上就是耍酷发夹最近收集整理的关于el-tabale 多选添加分页默认选中的全部内容，更多相关el-tabale内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：个人笔记
浏览次数：101 次浏览
发布日期：2024-09-13 12:45:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_14_f5_14__23__2_z.html

el-tabale 多选添加分页默认选中

这里写目录标题

el-tabale 多选添加分页默认选中

1. 子组件 `initData` 初始化获取数据之后通过 `this.$nexttick(()=>{})` 对 `el-table` 进行默认选中。当前选中的项包括三部分：

2. 需要吧这三项进行合并去重，存储到 `currentSelect` . 然后根据 `el-table` 当前页的数据过滤后默认选中。默认选中会刷新 `selectionGoodsList` 为当前页面选中的数据。

3. 确认选中的时候就更新所有的选中项 `currentSelect` 。就OK了，因为我的是 `dialog` 添加的。所以用了 `.sync` 。

组件的使用和源码

最后

评论列表共有 0 条评论

发表评论取消回复

el-tabale 多选添加 分页 默认选中

这里写目录标题

el-tabale 多选添加 分页 默认选中

1. 子组件 initData 初始化获取数据之后 通过 this.$nexttick(()=>{}) 对 el-table 进行默认选中。当前选中的项 包括三部分 ：

2. 需要吧这三项进行合并去重，存储到 currentSelect . 然后根据 el-table 当前页的数据 过滤后 默认选中。默认选中会刷新 selectionGoodsList 为当前页面选中的数据。

3. 确认选中的时候 就更新所有的选中项 currentSelect 。就OK了，因为我的是 dialog 添加的。所以用了 .sync 。

组件的使用和源码

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

el-tabale 多选添加分页默认选中

el-tabale 多选添加分页默认选中

1. 子组件 `initData` 初始化获取数据之后通过 `this.$nexttick(()=>{})` 对 `el-table` 进行默认选中。当前选中的项包括三部分：

2. 需要吧这三项进行合并去重，存储到 `currentSelect` . 然后根据 `el-table` 当前页的数据过滤后默认选中。默认选中会刷新 `selectionGoodsList` 为当前页面选中的数据。

3. 确认选中的时候就更新所有的选中项 `currentSelect` 。就OK了，因为我的是 `dialog` 添加的。所以用了 `.sync` 。

发表评论取消回复