1、效果图
1.1、默认选中效果
1.2、单选,多选,全选效果
2、实现代码
<template>
<el-table
:data="tableData3"
ref="multipleTable"
@row-click="handleCurrentChange"
@selection-change="selsChange"
>
<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="date" label="日期"></el-table-column>
<el-table-column prop="name" 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: "山东省郓城县",
},
{
id: "2",
date: "2016-05-02",
name: "玉麒麟",
address: "河北省大名县",
},
{
id: "3",
date: "2016-05-02",
name: "智多星",
address: "山东省郓城县",
},
],
// 存 所选中行的id
arrID: [],
// 存 当前行数据
arrNew: [],
};
},
// 所定义的方法
methods: {
/**
* % tag 1 取消选中
* @param arr 已选中行id 数组
* @param val 当前选中行id
* @description 取消选中
*/
removeByValue(arr, val) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
}
},
/**
* % tag 点击事件
* @param row 行数据
* @description 当某一行被点击时会触发该事件
*/
handleCurrentChange(row) {
// 是否是已选中的行
var same = false;
if (this.arrID.length > 0) {
for (var i = 0; i < this.arrID.length; i++) {
if (this.arrID[i] == row.id) {
same = true;
this.removeByValue(this.arrID, row.id);
break;
}
}
if (same == true) {
this.$refs.multipleTable.toggleRowSelection(row, false);
} else {
this.$refs.multipleTable.toggleRowSelection(row, true);
}
} else {
// 首次点击直接选中 设置true
this.$refs.multipleTable.toggleRowSelection(row, true);
}
},
/**
* % tag 行变化调用
* @param val 所选中id 数组
* @description 获取选中的值
*/
selsChange(val) {
let valId = [];
for (var i = 0; i < val.length; i++) {
valId.push(val[i].id);
}
this.arrID = valId;
this.arrNew = val;
},
},
// 页面加载调用
mounted() {
// 默认选中
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2], true);
},
};
</script>
3、关键代码
1、splice方法
<template>
<div>
<ul>
<li v-for="(item, index) in books" :key="index">{{ item }}</li>
</ul>
<br />
<button @click="add">添加</button>
<button @click="modify">替换</button>
<button @click="del">删除</button>
</div>
</template>
<script>
export default {
data() {
return {
// 定义 数组heros
message: "你好",
books: ["三国演义", "西游记", "水浒传"],
};
},
methods: {
add() {
this.books.splice(
2,
0,
"splice可以增、删、替换元素 splice(开始地址,删除个数,内容) "
);
},
modify() {
// 表示 西游记 被替换 红楼么 中间1 删除一位
this.books.splice(1, 1, "删除个数必须为1才是修改");
},
del() {
// splice(开始地址,删除个数,内容)
// 删除第一位数据
this.books.splice(0, 1);
},
},
};
</script>
效果图
2、push方法
// push 最后一位追加
// pop 最后一位删除
this.books.push("push添加1", "push添加2");
this.books.pop();
2、toggleRowSelection
toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中
用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否 selected 为 true 则选中
3、@row-click=“handleCurrentChange”
当某一行被点击时会触发该事件
4、@selection-change=“selsChange”
当选择项发生变化时会触发该事件 比如获取当前行数据
5、this.$refs.multipleTable.toggleRowSelection(row, true)理解
this,代表在当前vue里面,$refs代表一个引用(可以看成一个包名),然后multipleTable就是el-tab中的ref,可以理解为该控件的一个对象,之后通过对象调用方法toggleRowSelection
可参考elementui官网