有段时间没有来总结笔记了, 今天抓紧一切时间, 来总结一个小问题
使用 vue+elementui 搭建的管理平台, 用到表格多选时的问题
官网中有一个切换 table 默认选中状态的 demo
如有需要请点击查看: http://element-cn.eleme.io/#/zh-CN/component/table
简单的说一下我遇到的问题:
1, 点击按钮时, 动态获取弹窗中表格的数据, 并且显示已经选中的第几行的数据
html 内容:
- <div id="app">
- <el-button @click="dialog = true"> 显示弹窗 </el-button>
- <el-dialog title="表格" :visible.sync="dialog">
- <el-table ref="refTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column label="日期" width="120">
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column prop="name" label="姓名" width="120"></el-table-column>
- <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
- </el-table>
- </el-dialog>
- </div>
vue 部分:
- <script>
- var Vue = new Vue({
- el: '#app',
- data() {
- return {
- dialog: false,
- tableData3: [], // 表格的数据
- multipleSelection: [] // 表格中选中的行的内容
- }
- },
- mounted() {
- this.getTablelist(); // 获取弹窗中 表格数据
- this.toggleSelection(this.tableData3[2]); // 默认选中第三行
- },
- methods: {
- toggleSelection(rows) { // 这里是点击时 切换选中的行
- if (rows) {
- rows.forEach(row => {
- this.$refs.refTable.toggleRowSelection(row);
- });
- // toggleRowSelection : 用于多选表格, 切换某一行的选中状态, 如果使用了第二个参数, 则是设置这一行选中与否 (selected 为 true 则选中)
- } else {
- this.$refs.refTable.clearSelection();
- // clearSelection : 用于多选表格, 清空用户的选择
- }
- },
- handleSelectionChange(val) { // 获取选中的行的数据
- this.multipleSelection = val;
- },
- getTablelist() { // 获取表格数据
- let _this = this;
- $.ajax({
- type: 'POST',
- url: 'https://easy-mock.com/mock/59b236cce0dc663341a22f8b/vuetest/api/tablelist',
- dataType: 'json',
- success: function (data) {
- if (data.code == 200) {
- _this.tableData3 = data.data;
- }
- }
- })
- }
- }
- })
- </script>
如果直接按照上面的代码运行, 会有一个报错信息,
Error in mounted hook: "TypeError: Cannot read property'clearSelection'of undefined"
提示 clearSelection 方法未定义, 此方法是用来清空表格选中的
或者
Error in mounted hook: "TypeError: rows.forEach is not a function"
为什么会报错呢? 一开始不太清楚, 经过百度搜索后, 才知道,
原来, 写在弹窗中的表格由于是动态加载的, 所以获取不到表格的
this.$refs.multipleTable
所以, 在调用表格的 toggleRowSelection 方法时, 会产生报错, 因此, 解决办法, 就是放在 vue 的延迟回调里面, 也就是 vue 的
Vue.nextTick() 里面, 这样多了一个延迟回调, 表格的默认选中就好使了
- toggleSelection(rows) { // 设置默认选中
- this.$nextTick(()=>{ // 延迟回调
- if (rows) {
- rows.forEach(row => {
- this.$refs.refTable.toggleRowSelection(row);
- })
- } else {
- this.$refs.refTable.clearSelection();
- }
- })
- },
注意:
默认选中时, 要注意是传入的数组, 还是单个的一个对象, 如果是数组, 里面需要循环, 如果单个的对象, 则需要把循环去掉
demo 如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 默认选中 table</title>
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.CSS">
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- </head>
- <body>
- <div id="app">
- <el-button @click="getTablelist"> 显示弹窗 </el-button>
- <el-dialog title="表格" :visible.sync="dialog">
- <el-table ref="refTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column label="日期" width="120">
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column prop="name" label="姓名" width="120"></el-table-column>
- <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
- </el-table>
- </el-dialog>
- </div>
- <script>
- var Vue = new Vue({
- el: '#app',
- data() {
- return {
- dialog: false,
- tableData3: [], // 表格的数据
- multipleSelection: [] // 表格中选中的行的内容
- }
- },
- methods: {
- toggleSelection(rows) { // 这里是点击时 切换选中的行
- this.$nextTick(()=>{ // 延迟回调
- if (rows) {
- rows.forEach(row => {
- this.$refs.refTable.toggleRowSelection(row);
- });
- // toggleRowSelection : 用于多选表格, 切换某一行的选中状态, 如果使用了第二个参数, 则是设置这一行选中与否 (selected 为 true 则选中)
- } else {
- this.$refs.refTable.clearSelection();
- // clearSelection : 用于多选表格, 清空用户的选择
- }
- })
- },
- handleSelectionChange(val) { // 获取选中的行的数据
- this.multipleSelection = val;
- },
- getTablelist() { // 获取表格数据
- let _this = this;
- let arr = [];
- $.ajax({
- type: 'POST',
- url: 'https://easy-mock.com/mock/59b236cce0dc663341a22f8b/vuetest/api/tablelist',
- dataType: 'json',
- success: function (data) {
- if (data.code == 200) {
- _this.dialog = true;
- _this.tableData3 = data.data;
- for (let i = 0; i <data.data.length; i++) {
- arr.push(data.data[i]);
- }
- _this.toggleSelection([arr[5],arr[3]]); // 默认选中第三行
- }
- }
- })
- }
- }
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/15454/da8f5755cd42ec312b56302ad09d5770.html