el-table入门学习
el-form的入门学习
·
el-table入门学习
知识点
data为表单数据,格式为[{...},{...},{...}]border显示表格边框fix默认为左固定，设置为"right"右固定height和max-height的设置，可以固定表头formatter(row)的返回值可以格式化当前的列slot-scope='scope'可以取出当前行信息scope.row,当前行下标scope.$indexarray.splice(index,len)可以移除数组元素el-table-column的嵌套可以实现多层表头el-table-column标签内type='index'，:index='indexMethod(index)'可以设置序号列stripe设置表格为条纹样式highlight-current-row可以实现点击单行高亮显示@current-change(currRow,prevRow)高亮改变钩子this.$refs['refName'].setCurrentRow(row)设置高亮方法，row为null，则高亮取消el-table-column标签内type='selection'，可设置多选列el-table标签内@selection-change(rows)，rows为勾选中的列this.$refs['refName'].toggleRowSelection(row)可切换列的勾选状态this.$refs['refName'].clearSelection()清空列的选中el-table标签内:default-sort='{prop:'date',order:'ascending'}'设置默认排序列和排序方式el-table-column标签内需要设置sortable，作为可排序列标志el-table-column标签设置:filters='[{text:'xxx',value:'xxx"}]'设置筛选内容，:filter-method(value,row,column)分别为筛选的value值，每一行，每一列，column.property可以获取列的key，通过返回值row[column.property]===value为true则保留当前行数据this.$refs['refName'].clearFilter(column.property)清除此列的筛选情况this.$refs['refName'].clearFilter()清除所有列的筛选情况scope配合el-popover设置trigger='hover'，el-popover中的slot='reference'配合el-tag标签显示表格列的内容el-table-column标签内type='expand'作为可展开的列el-table标签内设置:tree-props="{children:'children',hasChildren:'hasChildren'}"，还可以是设置default-expand-all默认展开树结构:data='array.filter(item=>true/false)'可以动态过滤表格数据el-table标签内设置show-summary，可以合计数值类型列- 自定义合计需要
:summary-method(param)，param有columns,data属性，自定义设置设计到了array.forEach((column,index)=>{}),array.map(item=>{}),array.every(value=>{}),array.reduce((prev,curr)=>{},0)一系列lambda表达式,返回的是一个数组，长度与列数相同，作为尾列显示 el-table使用span-method(row,column,rowIndex,columnIndex)合并行和列，分别为行对象，列对象，行下标，列下标，返回的为{rowspan:num1,colspan:number}/[num1,num2]，分别表示行合并，列合并单元格数目
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<!-- stripe：条纹，斑马线 -->
<!-- border：边框设置 -->
<!-- height：固定表头 -->
<!-- row-class-name：设置表行class -->
<!-- max-height：指定最大高度 -->
<el-table
:data='tableData1'
stripe
:border='true'
max-height='300px'
>
<el-table-column width="250px" prop='date' label='日期' :formatter='dateFormat' fixed='left'></el-table-column>
<el-table-column width="250px" prop='name' label='姓名'></el-table-column>
<el-table-column width="250px" prop='address' label='地址'></el-table-column>
<el-table-column width="250px" fixed='right' label='操作'>
<template slot-scope='scope'>
<el-button @click='showName(scope.row)'>按钮</el-button>
<el-button @click='removeCol(scope.row,scope.$index)'>移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- highlight-current-row实现单选 -->
<el-table
:data='tableData2'
height='500px'
highlight-current-row
ref='tableRef2'
@current-change='handleCurrentChange'
@selection-change='handleSelectionChange'
:default-sort='{prop:"date",order:"asccending"}'
>
<el-table-column type='selection'></el-table-column>
<el-table-column type='index' label='序号' width='50px' :index='indexMethod'></el-table-column>
<el-table-column
prop='date'
label='日期'
:formatter='dateFormat'
sortable
column-key='date'
:filters="[{text:'1999-5-29',value:'1999-5-29'},{text:'1998-5-29',value:'1998-5-29'}]"
:filter-method="filterDate"
></el-table-column>
<el-table-column label='配送信息'>
<el-table-column
prop='name'
label='姓名'
sortable
:filters='[{text:"唐三",value:"唐三"},{text:"唐舞麟",value:"唐舞麟"},{text:"王小虎",value:"王小虎"}]'
:filter-method='filterHandler'
></el-table-column>
<el-table-column label='地址'>
<el-table-column prop='province' label='省份'></el-table-column>
<el-table-column prop='city' label='市区'></el-table-column>
<el-table-column prop='address' label='地址'></el-table-column>
<el-table-column prop='email' label='邮编'></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
<div>
<el-button @click='setCurrent(tableData2[2])'>选择第三行</el-button>
<el-button @click='setCurrent'>取消选择</el-button>
<el-button @click='toggleSelection([tableData2[1],tableData2[2]])'>切换二三两行的选中状态</el-button>
<el-button @click='toggleSelection'>取消选中</el-button>
<el-button @click='clearFilterDate'>清除日期过滤器</el-button>
<el-button @click='clearFilter'>清楚所有过滤器</el-button>
</div>
<el-table :data='tableData2'>
<el-table-column label='日期' prop='date' :formatter="dateFormat"></el-table-column>
<el-table-column label='姓名'>
<template slot-scope='scope'>
<el-popover trigger='hover' placement='top'>
<p>姓名：{{scope.row.name}}</p>
<p>住址：{{scope.row.address}}</p>
<div slot='reference' class='name-wrapper'>
<el-tag size='medium'>{{scope.row.name}}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column>
<template slot-scope='scope'>
<el-button size='mini'>编辑</el-button>
<el-button size='mini' type='danger'>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data='tableData2'>
<el-table-column type='expand'>
<template slot-scope='{row}'>
<el-form label-position='left' class='demo-table-expand'>
<el-form-item label='姓名'>
<span>{{row.name}}</span>
</el-form-item>
<el-form-item label='省份'>
<span>{{row.province}}</span>
</el-form-item>
<el-form-item label='城市'>
<span>{{row.city}}</span>
</el-form-item>
<el-form-item label='地址'>
<span>{{row.address}}</span>
</el-form-item>
<el-form-item label='日期'>
<span>{{dateFormat(row)}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop='name' label="姓名"></el-table-column>
</el-table>
<el-table :data='tableData3' :border='true' row-key='id' default-expand-all :tree-props='{children:"children",hasChildren:"hasChildren"}'>
<el-table-column prop='name' label='姓名'></el-table-column>
</el-table>
<el-table
:data='tableData1.filter(data=>!search||data.name.includes(search))'
show-summary
:summary-method='getSummaries'
:span-method='arraySpanMethod'
>
<el-table-column prop='date' label='日期' :formatter='dateFormat'></el-table-column>
<el-table-column prop='name' label='姓名'></el-table-column>
<el-table-column prop='address' label='地址'></el-table-column>
<el-table-column prop='money' label='金额'></el-table-column>
<el-table-column>
<template slot='header' slot-scope="scope">
<el-input v-model='search' size='mini' placeholder='请输入关键字搜索'></el-input>
</template>
<template slot-scope='scope'>
<el-button size='mini' >修改</el-button>
<el-button size='mini' type='danger'>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data(){
return{
tableData1:[
{date:new Date(),name:'唐三',address:'斗罗大陆',money:1000},
{date:new Date(),name:'荣念冰',address:'魔法帝国',money:10000},
{date:new Date(),name:'唐舞麟',address:'神界',money:1000000},
{date:new Date(),name:'柔骨兔',address:'斗罗大陆',money:1000000}
],
tableData2:[
{date:new Date("1999-05-29"),name:'唐三',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date("1998-05-29"),name:'荣念冰',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date("1997-05-29"),name:'唐舞麟',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date("1995-05-29"),name:'柔骨兔',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date("1996-05-29"),name:'王小虎',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date(),name:'王小虎',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date(),name:'王小虎',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date(),name:'王小虎',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
{date:new Date(),name:'王小虎',province:'安徽',city:'合肥',address:"安徽省合肥市肥西县北村花园1501弄",email:'235000'},
],
tableData3:[
{id:1,name:'爷爷',children:[{id:12,name:'爸爸',children:[{id:123,name:'儿子'}]}]}
],
currentRow:null,
mutipleSelection:[],
search:'',
}
},
methods:{
indexMethod(index){
return index*2;
},
arraySpanMethod({row,column,rowIndex,columnIndex}){
if(rowIndex%2===0){
if(columnIndex === 0){
return [1,2]
}else if(columnIndex === 1){
return [0,0]
}
}
if(columnIndex === 2){
if(rowIndex%2===0){
return [2,1]
}else if(rowIndex%2===1){
return [0,0]
}
}
},
getSummaries(param){
let {columns,data} = param
let sums = []
columns.forEach((column,index)=>{
if(index===0){
sums[index] = '总价'
return
}
let values = data.map(item=>Number(item[column.property]))
if(!values.every(value=>isNaN(value))){
sums[index] = values.reduce((prev,curr) => {
let value = Number(curr)
if(!isNaN(value)){
return prev+curr
}else{
return prev
}
},0)
sums[index] += ' 元'
}else{
sums[index] = 'N/A'
}
})
return sums
},
//日期格式化钩子
dateFormat(row){
let date = row.date
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
},
//按钮钩子
showName(row){
console.log(row.name)
},
//移除按钮钩子
removeCol(row,index){
this.tableData1.splice(index,1)
},
//设置高亮钩子
setCurrent(row){
this.$refs['tableRef2'].setCurrentRow(row)
},
//高亮改变钩子
handleCurrentChange(currentRow,oldCurrentRow){
this.currentRow = currentRow
},
//高亮
toggleSelection(rows){
if(rows){
rows.forEach(row => {
this.$refs['tableRef2'].toggleRowSelection(row)
});
}else{
this.$refs['tableRef2'].clearSelection();
}
},
//选中改变钩子
handleSelectionChange(rows){
this.mutipleSelection = rows;
},
//姓名筛选钩子
filterHandler(value,row,column){
let prop = column['property'];
return row[prop] === value;
},
//日期筛选钩子
filterDate(value,row,column){
let prop = column['property'];
return `${row[prop].getFullYear()}-${row[prop].getMonth()+1}-${row[prop].getDate()}` == value
},
clearFilterDate(){
this.$refs['tableRef2'].clearFilter(`date`)
},
clearFilter(){
this.$refs['tableRef2'].clearFilter();
}
}
})
</script>
官网
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献17条内容
所有评论(0)