elementUI表格,vue中element
这篇文章主要为大家详细介绍了某视频剪辑软件的ElementUI表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
元素用户界面表格示例：一个基本的表格埃尔表的属性埃尔-表格-列的属性多级表头获取表格，重点说下！单选多选排序筛选自定义列展开行总结
ElementUI 表格
前置工作：安装好某视频剪辑软件和元素。如果是按需引入，请确保表格、表格列模块已经引入
示例：一个基本的表格
模板
埃尔表
:data=tableData
stripe=true
style=宽度：100%
埃尔-表格-列
prop=name
标签=名称
/El-表格-列
埃尔-表格-列
今天买
标签=日购买
/El-表格-列
埃尔-表格-列
每月一次
标签=月购买
/El-表格-列
埃尔-表格-列
prop=totalBuy
标签=总共购买
/El-表格-列
/el-table
/模板
脚本
导出默认值{
姓名：家，
data(){
返回{
表格数据：[
{
名称： oppo ，
今天买：500,
月工资：3500,
总计：22000英镑
},
{
名称： vivo ，
今天买：300,
月工资：2200,
总计：24000英镑
}//.
]
}
}
}
/脚本
el-table的属性
属性属性值说明条纹书是否使用斑马纹边境酒吧是否使用边框高度数值固定表头。只要设置了属性，就会自动固定表头最大高度数值位表格设置最大高度
el-table-column的属性
属性属性值说明固定真值（默认；左)左右固定栏，滚动的时候会浮动起来，可以选择浮在哪一边如果我们希望通过行内的一些属性来对行做不同的显示，那么我们可以给埃尔表添加行类别名称属性。
行类别名称属性值是一个回调函数
//.
脚本
导出默认值{
方法：{
//处理函数
tableRowClassName({row，rowIndex}) {
if (rowIndex===1) {
返回"警告行";
} else if (rowIndex===3) {
返回"成功-行";
}
返回"";
}
}
}
/脚本
风格。埃尔表。警告-行{
背景：旧花边
}。埃尔表。成功-行{
背景：# f 0 F9 EB
}
/风格
多级表头
通过埃尔柱嵌套实现多级表头，数据更具支柱进行遍历，看如下案例
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
prop=date
标签=日期
宽度=150
/El-表格-列
埃尔-表格-列标签=配送信息
埃尔-表格-列
prop=name
标签=姓名
宽度=120
/El-表格-列
！-地址没有家支柱属性，所以不会对数据流影响-
埃尔-表格-列标签=地址
埃尔-表格-列
省
标签=省份
宽度=120
/El-表格-列
埃尔-表格-列
prop=城市
标签=市区
宽度=120
/El-表格-列
埃尔-表格-列
prop=地址
标签=地址
宽度=300
/El-表格-列
埃尔-表格-列
prop=zip
标签=邮编
宽度=120
/El-表格-列
/El-表格-列
/El-表格-列
/el-table
效果如下
获取表格，重点说下！！！
射流研究…中如何获取表格？通过给埃尔表添加裁判员属性为表格做唯一标识
El-表格突出显示-当前-行当前-更改=更改行 ref=符号表格
/el-table
//.
脚本
//.
方法：{
setCurrent(row) {
//通过这个。$参考文献。表格裁判员值
//设置表格的的二行为选中
这个refs.singleTable
},
//.
/脚本
单选
只需要配置突出显示-当前行属性即可实现单选。之后由电流变化事件来管理选中时触发的事件，它会传入当前行，旧当前行。如果需要显示索引，可以增加一列埃尔-表格-列，设置类型属性为指数即可显示从一开始的索引号
埃尔-表格突出显示-当前-行当前-更改=changerow
埃尔-列属性=名称标签=姓名/El-列
埃尔-列属性=地址标签=地址/El-列
el-column prop=email label=邮箱/El-列
/el-table
脚本
//.
方法：{
setCurrent(row) {
//设置表格的的二行为选中
这个参考文献。单人桌。setcurrentrow(1)；
},
//.
/脚本
多选
手动添加一个埃尔柱属性，添加类型=选择，会调价一行多选按钮
模板
！-使用选择-更改监听选项改变，传入一个函数名-
埃尔表
ref=multipleTable
:data=tableData
工具提示-效果=黑暗
style=宽度：100%
@ selection-change= handleSelectionChange
！- type=selection 生成多选-
埃尔-表格-列
type=selection
宽度=55
/El-表格-列
埃尔-表格-列
标签=日期
宽度=120
模板插槽-scope=“scope”{ scope。划。日期} }/模板
/El-表格-列
埃尔-表格-列
prop=name
标签=姓名
宽度=120
/El-表格-列
埃尔-表格-列
prop=地址
标签=地址
显示溢出工具提示
/El-表格-列
/el-table
/模板
脚本
//选中某一行，清除选项
/脚本
使用js选中
脚本
//这个。$参考文献。表单标识toggleRowSelection(行),行为列表数据的一整行数据
这个参考文献。多表。togglerowselection(行)；
//这个。$参考文献。表单标识clear selection()；全不选
这个参考文献。多表。清除选择()；
/脚本
排序
在表格中定义默认排序定义默认排序列和排序规则
通过给列添加srtotable属性赋予列排序功能
模板
！-在表格中设设置默认排序规则-
埃尔表
:default-sort={prop:todayBuy ，order:descending}
埃尔-表格-列
prop=name
标签=名称
/El-表格-列
埃尔-表格-列
今天买
标签=日购买
/El-表格-列
埃尔-表格-列
每月一次
标签=月购买
/El-表格-列
！-在表格中添加srottable属性，会添加字段排序功能-
埃尔-表格-列
srottable
prop=totalBuy
标签=总共购买
/El-表格-列
/el-table
/el-table
/模板
筛选
在列中定义：过滤器属性，值为一个[{ text: ，value: }]的选项数组，提供给用户筛选。同时，指定处理的回调函数：过滤方法，值为函数名。有三个参数，选中的值、遍历时候的行、遍历时候的列
模板
！-.设置选项和处理函数-
埃尔-表格-列
:filters=[{text:300 ，value:300}，{text:800 ，value:800}]
:filter-method=handleFilter
每月一次
标签=月购买
/El-表格-列
！-.-
/模板
脚本
handleFilter(val，row){
返回row.todayBuy==val
}
/脚本
自定义列
一般我们会添加一个操作列，如删除和编辑。那么我们可以不指定支柱属性，然后为列添加其他内容如下案例。同时，我们可以通过列上定义slot-scope="scope "，通过范围来获取列和行。一下直接使用官网案例
模板
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
标签=日期
宽度=180
！-定义插槽范围="范围"后就可在范围中获取列和行数据了-
模板槽-范围="范围"
i class=el-icon-time/i
span style= margin-left:10px " { scope。划。日期} }/span
/模板
/El-表格-列
埃尔-表格-列
标签=姓名
宽度=180
！-定义插槽范围="范围"后就可在范围中获取列和行数据了-
模板槽-范围="范围"
埃尔-波普沃触发器=悬停位置=顶部
p姓名：{{ scope.row.name }}/p
p住址：{{ scope.row.address }}/p
div slot= reference class= name-wrapper
El-tag size= medium { scope。划。name } }/El标签
/div
/el-popover
/模板
/El-表格-列
埃尔-表格-列标签=操作
！-定义插槽范围="范围"后就可在范围中获取列和行数据了-
模板槽-范围="范围"
埃尔按钮
size=mini
@click=handleEdit(范围 index，scope.row)编辑/el-button
埃尔按钮
size=mini
类型=危险
@click=handleDelete(范围 index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
/模板
脚本
导出默认值{
data() {
返回{
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
}, {
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
}, {
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}]
}
},
方法：{
//按钮的点击函数
handleEdit(索引，行){
console.log(索引，行);
},
句柄删除(索引，行){
console.log(索引，行);
}
}
}
/脚本
展开行
知识多又杂，一点点积累着，因为需求也是五花八门，用得上的。
在列(el柱)中添加属性type=expand 就可设置为展开行，展开的内容定义在列标签内。属性的获取同样是通过插槽范围="范围"详情如下案例：
模板
el-table :data=tableData
El-table-column type= expand
模板槽-范围="范围"
电子贺卡
p名称：{{scope.row.name }}/p
p地址：{{scope.row.address }}/p
/电子名片
/模板
/El-表格-列
/el-table
/模板
脚本
导出默认值{
data() {
返回{
表数据：[{
id: 12987125 ，
名称： 好滋好味鸡蛋仔，
类别： 江浙小吃、小吃零食，
desc:’荷兰优质淡奶，奶香浓而不腻，
地址： 上海市普陀区真北路，
商店： 王小虎夫妻店，
shopId:“10333”
}, {
id: 12987126 ，
名称： 好滋好味鸡蛋仔，
类别： 江浙小吃、小吃零食，
desc:’荷兰优质淡奶，奶香浓而不腻，
地址： 上海市普陀区真北路，
商店： 王小虎夫妻店，
shopId:“10333”
}]
}
}
}
/脚本
总结
本篇文章就到这里了，希望能给您带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。