点击《el | 您所在的位置:网站首页 › vue中多选框选中后按原本的顺序显示 › 点击《el |
前期回顾 Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2,技术栈有axios、Vh等,下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836 公司各种需求又来了,直接看下面文吧,一看就懂就不在说需求了 ,此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】
目录 第一种选中复选框表格变色 效果图: 第二种 点击行 表格变色 + 鼠标经过无hover效果 效果图: 第三种 鼠标经过自定义hover颜色效果 效果图: 第四种 点击某一事件表格背景色 变化 效果图: 结语: @selection-change="selected" 复选框被选中的触发事件 @row-click="rowClickEv" 某一行被点击行触发事件 :row-style="isRed" 行的 style 的回调方法,也可以使用一个固定的 Object 为所有 行设置一样的 Style。 第一种选中复选框表格变色 效果图: export default { name: "", data() { return { selectedArrData: [], // 把选择到的当前行的id存到数组中 tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", id: "1", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", id: "2", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", id: "3", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", id: "4", }, ], }; }, methods: { // 复选框被选中的事件 selected(row) { // console.log(row);//点击的那行数据 this.selectedArrData = row; }, isRed({ row }) { const checkIdList = this.selectedArrData.map((item) => item.id); if (checkIdList.includes(row.id)) { return { backgroundColor: "#DE6", color: "red", }; } }, }, }; 第二种 点击行 表格变色 + 鼠标经过无hover效果 效果图:export default { name: "", data() { return { selectedArrData: [], // 把选择到的当前行的id存到数组中 tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", id: "1", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", id: "2", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", id: "3", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", id: "4", }, ], }; }, methods: { // 某一行被点击行触发事件,默认形参代表一整行数据 rowClickEv(row) { // console.log(row);//点击的那行数据默认是对象{__ob__: Observer},将其转数组 this.selectedArrData = [row]; }, isRed({ row }) { const checkIdList = this.selectedArrData.map((item) => item.id); if (checkIdList.includes(row.id)) { return { backgroundColor: "#DE6", color: "red", }; } }, }, }; // 修改鼠标经过表格的颜色 /deep/ .el-table tbody tr:hover > td { // background-color: rebeccapurple !important; // color: #ffffff; // 可以选择隐藏 background-color: transparent !important; } 第三种 鼠标经过自定义hover颜色效果 效果图: 第四种 点击某一事件表格背景色 变化 效果图: 编辑 export default { name: "", data() { return { selectedArrData: [], // 把选择到的当前行的id存到数组中 tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", id: "1", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", id: "2", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", id: "3", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", id: "4", }, ], }; }, methods: { // 编辑事件 handleEdit(index,row) { this.selectedArrData = [row]; }, // 操作表格变色 isRed({ row }) { const checkIdList = this.selectedArrData.map((item) => item.id); if (checkIdList.includes(row.id)) { return { backgroundColor: "#DE6", color: "red", }; } }, }, }; // 修改鼠标经过表格的颜色 /deep/ .el-table tbody tr:hover > td { // background-color: rebeccapurple !important; // color: #ffffff; // 可以选择隐藏 background-color: transparent !important; } 结语: 最后祝大家都可以早早下班,早早回家,不为bug而烦恼, ,如果对你有微乎帮助,请点个收藏以备找时方便 |
CopyRight 2018-2019 实验室设备网 版权所有 |