js怎么获取vue ElementUI表格(elementui,JS,vue,开发技术)

ElementUI 表格

前置工作： 安装好vue和elemetUI。如果是按需引入，请确保Table、TableColumn模块已经引入

示例：一个基本的表格

<template><el-table:data="tableData"stripe="true"><el-table-columnprop="name"label="名称"></el-table-column><el-table-columnprop="todayBuy"label="日购买"></el-table-column><el-table-columnprop="monthBuy"label="月购买"></el-table-column><el-table-columnprop="totalBuy"label="总共购买"></el-table-column></el-table></template><script>exportdefault{name:"home",data(){return{tableData:[{name:'oppo',todayBuy:500,monthBuy:3500,totalBuy:22000},{name:'vivo',todayBuy:300,monthBuy:2200,totalBuy:24000}//...]}}}</script>

el-table的属性

属性属性值说明stripebool是否使用斑马纹borderbool是否使用边框height数值固定表头。只要设置了属性，就会自动固定表头max-height数值位表格设置最大高度

el-table-column的属性

属性属性值说明fixedtrue(默认;左)|left|right固定栏，滚动的时候会浮动起来，可以选择浮在哪一边

如果我们希望通过行内的一些属性来对行做不同的显示，那么我们可以给el-table添加row-class-name属性。

row-class-name属性值是一个回调函数

//...<script>exportdefault{methods:{//处理函数tableRowClassName({row,rowIndex}){if(rowIndex===1){return'warning-row';}elseif(rowIndex===3){return'success-row';}return'';}}}</script><style>.el-table.warning-row{background:oldlace;}.el-table.success-row{background:#f0f9eb;}</style>

多级表头

通过<el-column>嵌套实现多级表头，数据更具prop进行遍历，看如下案例

<el-table:data="tableData"><el-table-columnprop="date"label="日期"width="150"></el-table-column><el-table-columnlabel="配送信息"><el-table-columnprop="name"label="姓名"width="120"></el-table-column><!--地址没有家prop属性，所以不会对数据流影响--><el-table-columnlabel="地址"><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table-column></el-table-column></el-table>

效果如下

获取表格，重点说下！！！

js中如何获取表格？，通过给<el-table>添加ref属性为表格做唯一标识

<el-tablehighlight-current-rowcurrent-change="changerow"ref="signtable"></el-table>//...<script>//...methods:{setCurrent(row){//通过this.$refs.<表格ref值>//设置表格的的二行为选中this.$refs.singleTable},//...</script>

单选

只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号

<el-tablehighlight-urrent-rowcurrent-change="changerow"><el-columnprop="name"label="姓名"></el-column><el-columnprop="address"label="地址"></el-column><el-columnprop="email"label="邮箱"></el-column></el-table><script>//...methods:{setCurrent(row){//设置表格的的二行为选中this.$refs.singleTable.setCurrentRow(1);},//...</script>

多选

手动添加一个<el-column>属性，添加type="selection",会调价一行多选按钮

<template><!--使用selection-change监听选项改变，传入一个函数名--><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"@selection-change="handleSelectionChange"><!--type="selection"生成多选--><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><templateslot-scope="scope">{{scope.row.date}}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table></template><script>//选中某一行，清除选项</script>

使用js选中

<script>//this.$refs.<表单标识>.toggleRowSelection(row),row为tableData的一整行数据this.$refs.multipleTable.toggleRowSelection(row);//this.$refs.<表单标识>.clearSelection();全不选 this.$refs.multipleTable.clearSelection();</script>

排序

在表格中定义default-sort定义默认排序列和排序规则

通过给列添加srtotable属性赋予列排序功能

<template><!--在表格中设设置默认排序规则--> <el-table :default-sort="{prop:'todayBuy',order:'descending'}"><el-table-columnprop="name"label="名称"> </el-table-column><el-table-columnprop="todayBuy"label="日购买"> </el-table-column><el-table-columnprop="monthBuy"label="月购买"> </el-table-column><!--在表格中添加srottable属性，会添加字段排序功能--><el-table-columnsrottableprop="totalBuy"label="总共购买"> </el-table-column></el-table></el-table></template>

筛选

在列中定义:filters属性，值为一个[{ text: '', value: '' }]的选项数组，提供给用户筛选。同时，指定处理的回调函数:filter-method,值为函数名。有三个参数，选中的值、遍历时候的行、遍历时候的列

<template><!--...设置选项和处理函数--> <el-table-column:filters="[{text:'300',value:'300'},{text:'800',value:'800'}]":filter-method="handleFilter"prop="monthBuy"label="月购买"></el-table-column><!--...--></template><script>handleFilter(val,row){ returnrow.todayBuy==val}</script>

自定义列

一般我们会添加一个操作列，如删除和编辑。那么我们可以不指定prop属性，然后为列添加其他内容如下案例。同时，我们可以通过列上定义slot-scope="scope"，通过scope来获取列和行。一下直接使用官网案例

<template><el-table:data="tableData"><el-table-columnlabel="日期"width="180"><!--定义slot-scope="scope"后就可在scope中获取列和行数据了--><templateslot-scope="scope"><iclass="el-icon-time"></i><span>{{scope.row.date}}</span></template></el-table-column><el-table-columnlabel="姓名"width="180"><!--定义slot-scope="scope"后就可在scope中获取列和行数据了--><templateslot-scope="scope"><el-popovertrigger="hover"placement="top"><p>姓名:{{scope.row.name}}</p><p>住址:{{scope.row.address}}</p><divslot="reference"class="name-wrapper"><el-tagsize="medium">{{scope.row.name}}</el-tag></div></el-popover></template></el-table-column><el-table-columnlabel="操作"><!--定义slot-scope="scope"后就可在scope中获取列和行数据了--><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index,scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index,scope.row)">删除</el-button></template></el-table-column></el-table></template><script>exportdefault{data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}]}},methods:{//按钮的点击函数handleEdit(index,row){console.log(index,row);},handleDelete(index,row){console.log(index,row);}}}</script>

展开行

知识多又杂，一点点积累着，因为需求也是五花八门，用得上的。

在列(el-column)中添加属性type="expand"就可设置为展开行，展开的内容定义在列标签内。属性的获取同样是通过slot-scope="scope"详情如下案例：

<template><el-table:data="tableData"><el-table-cloumntype="expand"><templateslot-scope="scope"> <el-card><p>名称：{{scope.row.name}}</p><p>地址：{{scope.row.address}}</p></el-card></template></el-table-cloumn></el-table></template><script>exportdefault{data(){return{tableData:[{id:'12987125',name:'好滋好味鸡蛋仔',category:'江浙小吃、小吃零食',desc:'荷兰优质淡奶，奶香浓而不腻',address:'上海市普陀区真北路',shop:'王小虎夫妻店',shopId:'10333'},{id:'12987126',name:'好滋好味鸡蛋仔',category:'江浙小吃、小吃零食',desc:'荷兰优质淡奶，奶香浓而不腻',address:'上海市普陀区真北路',shop:'王小虎夫妻店',shopId:'10333'}]}}}</script>

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">