vuejs+elementUItable的常见的属性及事件⼀.table组件的⽅法，事件
⼆.常⽤的事件，属性
(⼀).属性
1.多选框（type = "selection"）需要实现勾选的功能
在<el-table> 内加⼊<el-table-column type="selection" width="55"></el-table-column>
2. :data="tableData" 是table的数据绑定
<el-table :data="tableData">
export default {
data() {
return{
tableData: [],
}
}
}
3.formatter ⽤来格式化内容
对table的值进⾏处理。Function(row, column, cellValue, index){}
A.使⽤formatter需要注意以下⼏点：
①⽆论formatter出何种形式，格式化出的DOM⼀定都是被包含在默认的div标签内
②在写formatter函数时要保证有值返回，否则单元格没有内容可展⽰，所以if的时候别忘了else
③formatter函数不会作⽤在列属性checkbox为true的单元格上，checkbox列是组件预留的。
B。查看⼩demo
<template>
<el-table :data="tableData3" ref="multipleTable">
<el-table-column type="selection" width="55" ></el-table-column>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
<el-table-column prop="date" label="⽇期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="IsAudit" :formatter="formatterColumn" label="审核状态" ></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1518 弄',
IsAudit:0,
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王⼩虎',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1518 弄',
IsAudit:1,
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1518 弄',
IsAudit:10,
sex:'-1'
}]
}
},
mounted() {
},
methods: {
formatSex: function (row, column, cellValue, index) { return row.sex == 1 ? '男' : row.sex == 0 ? '⼥' : '未知'; },
//状态改成汉字
formatterColumn(row, column) {
switch(row.IsAudit){
case 0:
return '未通过';
break;
case 1:
return '审核通过';
break;
case 10:
return '待审核';
break;
case 9:
return '草稿';
break;
default:
return '未知';
}
}
}
}
</script>
4.给table 的字段设置相应的颜⾊
<el-table-column label="第三⽅扎帐" >
<template slot-scope="{row}">
<span v-if="row.status ==2" @click="handleModifyStatus(row)">短款-700.00/3笔</span>
<span v-else-if="row.status == 3" @click="handleModifyStatus(row)"> 长款+100.00/1笔</span>
<span v-else>⼀致</span>
</template>
</el-table-column>
5.selectable (row, index) 是否可以选中
注意：仅对 type=selection 的列有效，类型为 Function，Function 的返回值⽤来决定这⼀⾏的 CheckBox 是否可以勾选使⽤：
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange">
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
selectable(row, index){
if(index === 1){
return true;
}else{
return false;
}
}
}
}
</script>
只有第⼆条是可以选中 其他不能
6.element table 禁⽌拖动
只需要添加个el-table-column 上添加 :resizable="false"
7. el-table 与el-checkbox 结合使⽤
<el-table :data="tableData" border > <el-table-column prop="name" label=
"姓名" /> <el-table-column prop="val1" label="报警通知"> <template slot-scope="scope">
<el-checkbox v-model="w.val1" /> </template>
</el-table-column>
<el-table-column prop="val2" label="预警通知"> <template slot-scope="scope">
<el-checkbox v-model="w.val2" /> </template>
</el-table-column>
</el-table>
tableData: [
{ id: '1', name: '王⼩勇', val1: true, val2: true }, { id: '2', name: '欧阳', val1: true, val2: false } ]
8 .el-dialog弹窗垂直居中（兼容IE）
.el-dialog{
display: flex;
display: -ms-flex; /* 兼容IE */
flex-direction: column;
-ms-flex-direction: column; /* 兼容IE */
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body{
max-height: 100%;
flex: 1;
-ms-flex: 1 1 auto; /* 兼容IE */
overflow-y: auto;
overflow-x: hidden;
}
.el-dialog__wrapper {
/*隐藏ie和edge中遮罩的滚动条*/
overflow: hidden;
}
(⼆).⽅法
<el-table @row-click="handleRowChange"> handleRowChange(row, event, column){ row此⾏的数据 } 2.selection-change 获取选中的所有值
<el-table @selection-change="selectionRowsChange"> selectionRowsChange(val){ val 选中的值}
三.实例
1.
2.简单的增删改
input标签placeholder属性1.table tr 点击 复选框选中 再次点击 复选框取消选中
①设置⼀个全局函数
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论