<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/ui.css"/> <style> #cableSelectionTable { } .el-table__header { width: 100% !important; } .el-table__body { width: 100% !important; } </style> </head> <body> <div id="cableSelectionTable"> <div class="con"> <div style="display: flex;margin-bottom: 10px"> <el-input v-model="searchText" placeholder="请输入关键字" clearable style="width: 200px;" size="small" @keyup.enter.native="search" > </el-input> <el-button type="primary" size="small" style="margin-left:5px" icon="el-icon-search" @click="search" ></el-button> <div class="searchRight"> <span class="item" style="margin:0px 5px"> {{ num === 0 ? '没有任何结果' : indexNum + 1 + '/' + num }}</span> <el-button icon="el-icon-arrow-up" circle style="font-size: 16px" type="text" size="mini" @click="prev" ></el-button> <el-button icon="el-icon-arrow-down" circle style="font-size: 16px" type="text" size="mini" @click="next" ></el-button> </div> </div> <el-table id="outTable" key="one" ref="tb" height="calc(100vh - 150px)" :data="data" border :header-cell-style="{color:'#333333',backgroundColor:'#77B6E4'}" :cell-style="{borderColor:'#e1e1e1'}"> <el-table-column label="线缆序号" prop="indexNumber" align="center" width="60"></el-table-column> <el-table-column label="Cable Name" prop="cableName" align="center" :show-overflow-tooltip="true" width="300"> </el-table-column> <el-table-column label="连线信息" prop="a" align="center" width="300" :show-overflow-tooltip="true"> <template slot-scope="scope"> <div v-for="(item,index) in scope.row.list" :key="index">{{item}}</div> </template> </el-table-column> <el-table-column label="A-Connetion" prop="a" align="center"> <el-table-column label="板卡" prop="a_board" align="center"></el-table-column> <el-table-column label="Location" prop="a_position" align="center"></el-table-column> </el-table-column> <el-table-column label="B-Connetion" prop="b" align="center"> <el-table-column label="板卡" prop="b_board" align="center"></el-table-column> <el-table-column label="Location" prop="b_position" align="center"></el-table-column> </el-table-column> <el-table-column label="用量" prop="amount" align="center" width="85px"> </el-table-column> <el-table-column label="代替阶" prop="substitute" :show-overflow-tooltip="true" align="center" width="150"> </el-table-column> <el-table-column label="InspurPN" prop="inspurPn" :show-overflow-tooltip="true" align="center" width="150"> </el-table-column> <el-table-column label="厂商料号" prop="supplierPn" :show-overflow-tooltip="true" align="center" width="150"> </el-table-column> <el-table-column label="版次" prop="supplierVersion" :show-overflow-tooltip="true" align="center" width="150"> </el-table-column> <el-table-column label="是否标准线缆" prop="isStandardCable" :show-overflow-tooltip="true" align="center" width="180"> </el-table-column> <el-table-column label="是否复用" prop="reuseInfo" :show-overflow-tooltip="true" align="center" width="150"> </el-table-column> <el-table-column label="无替代料原因" prop="substituteInfo" :show-overflow-tooltip="true" align="center" width="180"> </el-table-column> <el-table-column label="特殊实项备注" prop="spicalItemInfo" :show-overflow-tooltip="true" align="center" width="150"> <template slot-scope="scope"> <span>{{scope.row.reuseNumber}}</span> </template> </el-table-column> </el-table> </div> </div> </body> <script src="js/browser.js"></script> <script src="js/polyfill.js"></script> <script src="js/vue.js"></script> <script src="js/el.js"></script> <script src="js/axios.js"></script> <!-- use version 0.18.8 --> <script type="text/babel"> new Vue({ el: "#cableSelectionTable", data() { return { searchText: '', scroll: '', index: 1, preQuery: '', indexNum: 0, num: 0, main: null, /**上方为检索字段*/ data: [], //table 数组 } }, mounted() { window.addEventListener('scroll', this.dataScroll) this.main = document.querySelector('.el-table__body-wrapper') /**上方为检索*/ } , methods: { /**下方为检索方法*/ search() { console.log('s') this.num = 0 this.indexNum = 0 let main = this.main || document.querySelector('.el-table__body-wrapper') let innerHTML = main.innerHTML console.log(innerHTML, 'innerHTML') // 如果要兼容IE就使用下面的正则 (谷歌 IE 都可以使用) innerHTML = innerHTML.replace(new RegExp('<[^>]+>', 'g'), function (str) { return str.replace(new RegExp('(<\/?em.*?>)|(<\/?strong.*?>)', 'g'), '') }) //------ 这行代码不兼容IE // const emReg1 = new RegExp('<em style="background-color: yellow">', 'g') // innerHTML = innerHTML.replace(emReg1, '') // const emReg2 = new RegExp('</em>', 'g') // innerHTML = innerHTML.replace(emReg2, '') // const emReg3 = new RegExp('<strong style="background-color: #ff9632">', 'g') // innerHTML = innerHTML.replace(emReg3, '') // const emReg4 = new RegExp('</strong>', 'g') // innerHTML = innerHTML.replace(emReg4, '') // ------ main.innerHTML = innerHTML // 设置本次搜索背景色 if (this.searchText !== '' && this.searchText !== ' ') { const reg = new RegExp(this.searchText, 'g') const searchText = this.searchText let mainInnerHTML = innerHTML.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) { const reg1 = new RegExp('(?=>).+', 'g') return str.replace(new RegExp('(>).+', 'g'), function (str2) { return str2.replace(reg1, function (str1) { return str1.replace(reg, '<em style="background-color: yellow">' + searchText + '</em>') }) }) }) main.innerHTML = mainInnerHTML } // 替换配置 this.getSearchList() }, getSearchList() { // em标签都是被替换的 所以em标签的数量就是搜索到关键字的数量 const num = document.getElementsByTagName('em').length console.log(num, 'ssss') this.num = num if (num !== 0) { document.getElementsByTagName('em')[0].innerHTML = '<strong style="background-color: #ff9632">' + this.searchText + '</strong>' // 滚动到第一个关键字位置 document.getElementsByTagName('em')[0].scrollIntoView({ block: 'start', behavior: 'smooth' }) } }, dataScroll() { this.scroll = document.documentElement.scrollTop || document.body.scrollTop }, // 下一个 next() { if (this.num !== 0) { for (let i = 0; i < document.getElementsByTagName('em').length; i++) { document.getElementsByTagName('em')[i].innerHTML = this.searchText } if (this.indexNum === this.num - 1) { this.indexNum = 0 } else { this.indexNum = this.indexNum + 1 } document.getElementsByTagName('em')[this.indexNum].innerHTML = '<strong style="background-color: #ff9632">' + this.searchText + '</strong>' document.getElementsByTagName('em')[this.indexNum].scrollIntoView() } }, // 上一个 prev() { if (this.num !== 0) { for (let i = 0; i < document.getElementsByTagName('em').length; i++) { document.getElementsByTagName('em')[i].innerHTML = this.searchText } if (this.indexNum === 0) { this.indexNum = this.num - 1 } else { this.indexNum = this.indexNum - 1 } document.getElementsByTagName('em')[this.indexNum].innerHTML = '<strong style="background-color: #ff9632">' + this.searchText + '</strong>' document.getElementsByTagName('em')[this.indexNum].scrollIntoView() } } } }) </script> </html>
html实现全局搜索
最新推荐文章于 2024-01-25 13:45:27 发布