el-table中常用用法的总结

呦，＜el-table＞不用怕~

一 给表格添加复选框(checkbox)二 formatter的使用三 selectable (row, index) 是否可以选中四 插槽的使用

转载自https://blog.csdn.net/gao_xu_520/article/details/80049254 站在巨人的肩膀上，不知道巨人朋友累不累

一 给表格添加复选框(checkbox)

1.1 点击这一行，获取这一行的值 @row-click=“方法名” 。点击这一行触发的函数

代码如下：

//点击这一行，打印这条数据。 <el-table :data="tableData3" ref="multipleTable" @row-click="handleRowChange"> methods:{ handleRowChange(row, event, column){ console.log(row) }, }

1.2 勾选复选框，获取选中的值（数组） 第一步：type=“selection” ， 添加checkbox。 第二步：@selection-change=“方法名” ，勾选复选框触发

代码如下：

//勾选checkbox，打印这条数据。 <el-table :data="tableData3" ref="multipleTable" @selection-change="handleSelectChange"> <el-table-column type="selection" width="55" ></el-table-column> handleSelectChange(val){ console.log(val) },

1.3 点击这一行，自动勾选复选框，(再点击就取消勾选)获取选中所有值（数组） 第一步：type=“selection” ， 添加checkbox。 第二步：@selection-change=“方法名” ，勾选复选框触发 第三步：@row-click=“方法名” ，点击这一行，通过监听复选框的勾选状态，来动态的获取数据，并赋值给数组。

<el-table :data="tableData3" ref="multipleTable" @selection-change="handleSelectChange" @row-click="handleRowChange"> <el-table-column type="selection" width="55" ></el-table-column> handleSelectChange(val){ this.multipleSelection = val; }, handleRowChange(row, event, column){ this.$refs.multipleTable.toggleRowSelection(row); },

补充：this.$refs.multipleTable.toggleRowSelection(row);用于点击这一行的时候，控制勾选状态，当然可以加判断条件啦，各位攻城狮小朋友们自己查去吧。

二 formatter的使用

用法：:formatter=“方法名” 参数如下：Function(row, column, cellValue, index){}

呦，formatter，不用怕~

<template> <el-table :data="tableData3" ref="multipleTable" @selection-change="handleSelectChange" @row-click="handleRowChange"> <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="地址"> <template slot-scope="scope"> <template v-if="editOk"> <el-input class="edit-input" size="small" v-model="scope.row.address"></el-input> </template> <span v-else>{{ scope.row.address }}</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData3: [{ id:'1', date: '2020-10-01', name: '奥力给', address: '上海市普陀区金沙江路 1518 弄', IsAudit:0, sex:'1' }, { id:'2', date: '2020-10-01', name: '小阿giao', address: '上海市普陀区金沙江路 1518 弄', IsAudit:1, sex:'0' }, { id:'3', date: '2020-10-01', name: '李狗蛋', address: '上海市普陀区金沙江路 1518 弄', IsAudit:10, sex:'-1' }, ], editOk:true, } }, mounted() { }, methods: { handleSelectChange(row){ console.log(row) }, handleRowChange(row, event, column){ this.$refs.multipleTable.toggleRowSelection(row,true); }, 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>

三 selectable (row, index) 是否可以选中

注：仅对 type=selection 的列有效，即添加@select-change 方法以后。点击当前行数据，依然可以勾选，依然可以获取值，但是点击type=selection列 的时候，会提示不能选中。

代码如下：

<template> <el-table :data="tableData3"> <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>

四 插槽的使用

template slot-scope=“props” 用于获取一个对象。 4.1 获取当前行对象： 代码如下：

<el-table :data="tableData3" ref="multipleTable" @selection-change="handleSelectChange" @row-click="handleRowChange"> <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"> <template slot-scope="scope"> <button v-if="scope.row.sex==1">男</button> <button v-if="scope.row.sex==0">女</button> <button v-if="scope.row.sex==-1">妖</button> </template> </el-table-column> </el-table> <script> export default { data() { return { tableData3: [{ id:'1', date: '2020-10-01', name: '奥力给', address: '上海市普陀区金沙江路 1518 弄', IsAudit:0, sex:'1' }, { id:'2', date: '2020-10-01', name: '小阿giao', address: '上海市普陀区金沙江路 1518 弄', IsAudit:1, sex:'0' }, { id:'3', date: '2020-10-01', name: '李狗蛋', address: '上海市普陀区金沙江路 1518 弄', IsAudit:10, sex:'-1' }, ], editOk:true, } }, methods: { handleSelectChange(row){ console.log(row) }, handleRowChange(row, event, column){ this.$refs.multipleTable.toggleRowSelection(row); }, 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.2 整列的判断

<template> <el-table :data="tableData3" ref="multipleTable" @selection-change="handleSelectChange" @row-click="handleRowChange"> <el-table-column type="index" label="序号" width="60"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"> <template slot-scope="scope"> <template v-if="editOk"> <el-input class="edit-input" size="small" v-model="scope.row.address"></el-input> </template> <span v-else>{{ scope.row.address }}</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData3: [{ id:'1', date: '2020-10-01', name: '奥力给', address: '上海市普陀区金沙江路 1518 弄', IsAudit:0, sex:'1' }, { id:'2', date: '2020-10-01', name: '小阿giao', address: '上海市普陀区金沙江路 1518 弄', IsAudit:1, sex:'0' }, { id:'3', date: '2020-10-01', name: '李狗蛋', address: '上海市普陀区金沙江路 1518 弄', IsAudit:10, sex:'-1' }, ], editOk:true, } }, mounted() { }, methods: { handleSelectChange(row){ console.log(row) }, handleRowChange(row, event, column){ this.$refs.multipleTable.toggleRowSelection(row); }, } } </script>

4.3 展开符的使用

<el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item v-for="(item, index) in props.row.goodsCategoryList" > <span> {{ item.attrName }}：{{ item.attrValue }}</span> </el-form-item> </el-form> </template> </el-table-column>