文档章节

Vue element 表格获取选中项操作

tianma3798
 tianma3798
发布于 2018/10/18 14:39
字数 354
阅读 184
收藏 0

一、在使用element table表格时,获取选中项处理

1.视图

<div>
 <el-button type="primary" @click="getSelected()">获取选中结果</el-button>
 <el-table
    ref="multipleTable"
    :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>
</div>

2.js

export default {
  data() {
    return {
      tableData3: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      multipleSelection: []
    };
  },
  methods: {
    //保存选中结果
    handleSelectionChange(val) {
      console.info(val);
      this.multipleSelection = val;
    },
    //获取选中结果
    getSelected() {
      console.info(this.multipleSelection);
      console.info(this.$refs.multipleTable.tableData);
      console.info(this.$refs.multipleTable);
    }
  }
};

更多:

Vue element 二级菜单绑定示例

 Vue中路由管理器Vue Router使用介绍(三)

Vue中路由管理器Vue Router使用方式(二)-推荐

 

© 著作权归作者所有

tianma3798
粉丝 16
博文 144
码字总数 42290
作品 0
济南
高级程序员
私信 提问
Vue element表格分页数据加载示例

一、element ui表格分页数据加载示例 1.视图 2. js 显示结果: 二、后台接口代码 更多: Vue element 表格获取选中项操作 Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(...

tianma3798
2018/10/18
0
0
Vue Theme主题样式整理

一、ElementUI官方主题在线生成预览 https://elementui.github.io/theme-chalk-preview/#/zh-CN 使用步骤: 1.选择主题颜色,下载主题 包,然后解压 2.找到node_modules下的element-ui下的主...

tianma3798
2018/10/19
0
0
Vue+Element UI 使用整理

一、环境搭建 Element UI框架+Vue开发搭建示例 二、UI使用示例、常见问 1.Vue element 二级菜单绑定示例 2.Vue element 表格获取选中项操作 3. Vue element表格分页数据加载示例 3.Vue Elem...

tianma3798
02/13
0
0
vscode 中的 vue 格式化(一)

使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettier vetur 提供了下面一系列的功能: Features Syntax-highlighting 高亮 Snippet 代码片段 Emmet 缩写语法 Linting / Error Checki...

tianma3798
2018/10/18
0
0
vue + iview 项目实践总结

一直想把一大篇的总结写完、写好,感觉自己拖延太严重还总想写完美,然后好多笔记都死在编辑器里了,以后还按照一个小节一个小节的更新吧,小步快跑😂,先发出来,以后再迭代吧。 最近我们...

愚坤
03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
26
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0
17.windows上安装kafka并简单应用

参考:https://blog.csdn.net/yao8513277/article/details/81116718 1.单机版 1.1 安装jdk 略 1.2 安装zookeeper https://my.oschina.net/springMVCAndspring/blog/3045210 1.3 安装window上......

20190513
昨天
2
0
缓存雪崩

缓存雪崩原因:大批次的缓存数据,同一时刻过期 解决方案: 1、尽可能避免所有缓存在同一时刻过期,即:合理调整过期策略 2、对条件加锁 伪代码: public ProductselectProduct(String id){ ...

少年已不再年少
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部