element input自动补全输入框 + el-table
注:这个table没有做分页,数据又多,所以才在前端添加搜索定位功能
html 自动补全输入框 和 table
<el-autocomplete
v-model="state"
clearable
:fetch-suggestions="querySearchAsync"
placeholder="请输入企业名称"
@select="handleSelect"
></el-autocomplete>
<els-table v-on:tpdata="getBarData" ref="elstable" style="height:calc( 100% - 3vh )" ></els-table>
自动补全输入框对应方法
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
cb(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString) !== -1); // 包含输入文字的项目
};
},
handleSelect(item) {
console.log(item);
this.$refs.elstable.updateSpeakSentenceRow(item.index) // 将要选中的项目下标传入表格
},
// res.data 是后台返回的tabledata, restaurants 是table中的name和下标合成的自动补全筛选数组
this.restaurants = res.data.map( (item,index) => {
let a = {
value:item.name,
index:index
}
return a
} )
table
关键::row-class-name=“tableRowClassName”
<el-table
stripe
:header-cell-style="{color:'#00DEFF',
fontFamily:'FZZhengHeiS-EB-GB'
,fontSize:this.fitChartSize(24),fontWeight:400}"
:data="tableData"
ref="tableData"
highlight-current-row
:row-class-name="tableRowClassName"
height="100%"
@row-dblclick="dblclick"
>
。。。
</el-table>
// 滚动条滚动
updateSpeakSentenceRow(e) {
let curIndex = e;
this.index = e;
let vmEl = this.$refs.tableData.$el
// 计算滚动条的位置
const targetTop = vmEl.querySelectorAll('.el-table__body tr')[curIndex].getBoundingClientRect().top
const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
this.$refs.tableData.bodyWrapper.scrollTop = targetTop - containerTop;
},
// 选中行颜色改变
tableRowClassName({row,rowIndex}){
if (rowIndex == this.index) {
return 'current-row'
}
return ''
},