安徽省住房和城乡建设厅官网网站_室内设计网站有哪些知乎_软文营销经典案例200字_广州seo顾问服务

需求：初始化数据表头固定，通过查询或者页面携带参数查询，将后端返回的新字段加到原有表头上回显

     <el-tableref="table":data="tableData":header-cell-style="{ background: '#F5F7FA', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"striperow-key="id"border:row-class-name="tableRowClassName"@cell-click="tabClick"><el-table-columnv-for="(item, index) in viewColumns":key="index":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"/></el-table>

<script>
export default {data() {return {viewColumns: [{ prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },{ prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },{ prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },{ prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },{ prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },{ prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },{ prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },{ prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },{ prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },{ prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }],viewColumnsOne: [{ prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },{ prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },{ prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },{ prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },{ prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },{ prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },{ prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },{ prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },{ prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },{ prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }],}  }}</scipt>

methods:{
//获取数据的方法
getTabelData(){const params = {page:this.page,pagesize:this.pagesize,xxxxx}queryData(params).then(res =>{if (res && res.rows && res.rows.length > 0) {if (String(this.page) === '1' && (JSON.stringify(res.rows[0].modelCount) !== '{}' || res.rows.modelCount !== undefined)) {this.oneList = JSON.parse(JSON.stringify(res.rows[0].modelCount)) // 获取静态列的数据}// 判断静态列有没有if (this.oneList) {let inSertColums = []this.viewColumnsOne = [{ prop: 'partLevel', width: '70', align: 'left', label: 'LEVEL', fixed: false },{ prop: 'partNo', width: '120', align: 'left', label: '部品号', fixed: false },{ prop: 'partName', width: '120', align: 'left', label: '部品名', fixed: false },{ prop: 'partCName', width: '120', align: 'left', label: '部品中文名称', fixed: false },{ prop: 'sec', width: '70', align: 'left', label: 'SEC', fixed: false },{ prop: 'asmfunc', width: '120', align: 'left', label: '品目', fixed: false },{ prop: 'peTypeOne', width: '70', align: 'left', label: '工順1', fixed: false },{ prop: 'peType', width: '70', align: 'left', label: '工順2', fixed: false },{ prop: 'pattern', width: '120', align: 'left', label: '初始式样', fixed: false },{ prop: 'divType', width: '120', align: 'left', label: '初始区域', fixed: false }]for (const property in this.oneList) {inSertColums = [...inSertColums, { prop: property, width: '120', align: 'left', label: property, fixed: false }]res.rows.map((item) => {item[property] = item.modelCount[property]})}inSertColums.forEach((item, index) => {this.viewColumnsOne.splice(Number(10), 0, item)})const obj = {}// this.viewColumns = this.viewColumnsOne.reduce((prev, cur) => {//   obj[cur.prop] ? '' : (obj[cur.prop] = true && prev.push(cur))//   return prev// }, [])this.viewColumns = this.viewColumnsOne.reduce((prev, cur) => {if (!obj[cur.prop]) {obj[cur.prop] = trueprev.push(cur)}return prev}, []) //viewColumns最后获取到的就是拼接起来的表头数据this.tableData = res.rowsthis.total = res.rowcount}})}}