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

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

prop: ‘glassCategorysName’,
label: ‘品类’,
keynum: 2,
search: ‘’,
width: ‘102px’,
findData: function() {
that.mysearch()
},
options: []
},
{
prop: ‘thickness’,
label: ‘厚度’,
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()
}
}
}