VUE element-ui之table双表头遍历及筛选自动（回车查询）、重置、关闭dialog重置_el-table横向双表头(2)

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

keynum: 1,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
options: []
},
{
prop: ‘factory’,
label: ‘原片厂家’,
keynum: 1,
search: ‘’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
},
{
prop: ‘specs’,
label: ‘规格’,
keynum: 2,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
options: []
},
{
prop: ‘glassLevel’,
label: ‘等级’,
keynum: 1,
search: ‘’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
},
{
prop: ‘color’,
label: ‘颜色/膜系’,
keynum: 1,
search: ‘’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
},
{
prop: ‘quantity’,
label: ‘单包数量’,
keynum: 0,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
},
{
prop: ‘boxQuantity’,
label: ‘包数’,
keynum: 0,
search: ‘’,
sortable: ‘sortable’,
width: ‘102px’,
},
{
prop: ‘arear’,
label: ‘面积’,
keynum: 0,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
},
{
prop: ‘amount’,
label: ‘单价’,
keynum: 0,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
},
{
prop: ‘totalAmount’,
label: ‘金额’,
keynum: 0,
search: ‘’,
sortable: ‘custom’,
width: ‘102px’,
},
{
prop: ‘remark’,
label: ‘备注’,
keynum: 0,
search: ‘’,
width: ‘102px’,
}
],
}
},
watch: { //监听dialog状态与id并赋值
detailsVisible: {
handler(n, o) {
console.log(‘watch:’, n)
this.dialogVisible = n
console.log(n)
},
deep: true
},
paramtter(id) {
console.log(父传子id---, id);
this.detailsId = id
}
},
mounted() {
this.getOptions()
},
methods: {
// 获取表格下拉数据
getOptions() {
const tenantId = sessionStorage.getItem(‘tenantId’)
getDictionaryList({
categoryId: 11,
tenantId,
}).then(res=> { //展示label，参数取value
const supplierInfoNameOptions = res.data.map(el=>({label: el.dictionaryName, value: el.id}))
this.tablelist.forEach(el => {
if (el.prop === ‘glassCategorysName’) {
el.options = supplierInfoNameOptions
}
return el
})
})
getDictionaryList({
categoryId: 12,
tenantId,
}).then(res=> {
this.tablelist[3].options = res.data.map(el=>({label: el.dictionaryName, value: el.id}))
})
},
//调用接口排序
sortChange({ column, prop, order }) {
console.log(sort---, column)
this.sortColumn = order ? prop : undefined
// 正序asc,倒序desc
this.sortEnum = order === ‘ascending’ ? ‘ASC’ : order === ‘descending’ ? ‘DESC’ : undefined
this.mysearch()
this.currentPage = 1
},
//筛选参数与表格列prop比对，比对成功收取用户输入筛选条件，作为参数请求接口
getSearchItemValue(key) {
const item = this.tablelist.find(el => el.prop === key)
return item.search
},
//获取筛选参数
getParams() {
const params = {
glassCategorysId: this.getSearchItemValue(‘glassCategorysName’),
thickness: this.getSearchItemValue(‘thickness’),
factory: this.getSearchItemValue(‘factory’),
specs: this.getSearchItemValue(‘specs’),
glassLevel: this.getSearchItemValue(‘glassLevel’),
color: this.getSearchItemValue(‘color’),
}
return params
},
// 重置
selectSearchReset() {
this.tablelist.forEach(el => {
el.search = ‘’
})
this.mysearch()
},
//更新表格数据
mysearch(id) {
// console.log(numner---id, id);
const param = this.getParams()
console.log(params---, param);
getOriginalFilmDetails(this.detailsId || id, param).then(res => {
this.totalQuantity = res.data.totalQuantity
this.totalArear = res.data.totalArear
this.totalAmount = res.data.totalAmount
this.tableData = res.data.list
Object.keys(res.data).map(vls => {
var n = this.detailroweldescriptions.findIndex(function(item) { return item.props === vls })
if (n !== -1) {
this.detailroweldescriptions[n].value = res.data[vls]
}
})
})
},
//diaolog关闭前的操作
detailsCancel() {
this.dialogVisible = false
this.$emit(‘detailsHandle’, false)
this.tablelist.forEach(el => {
el.search = ‘’
})
this.mysearch()
}
}
}

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

style scoped>
/* 鼠标悬停背景色 */
/deep/ .el-table–enable-row-hover .el-table__body tr:hover > td {
background: #D3DEF9;

}

#### 最后更多分享：**前端字节跳动真题解析**

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• [外链图片转存中…(img-tu0DR85I-1715799663320)]