// 可拖拽组件是vuedraggable 自行百度下载 有不懂的可留言或私信
<el-table border stripe :data="list" :height="tableHeight" :columns="tableColumns">
<template slot-scope="scope">
<el-table-column label="序号" type="index" align="center" width="80">
<template slot-scope="scope">{{ (listQuery.pageNum - 1) * listQuery.pageSize + scope.$index + 1 }}</template>
</el-table-column>
<template v-for="(column, index) in tableColumns">
<el-table-column v-if="column.isChecked === true" :key="index" :prop="column.prop" :label="column.label">
<template slot-scope="scope">
<span v-if="column.prop === 'projectName'">
<el-link type="primary" @click="handleAudit(scope.row)">{{ scope.row.projectName }}</el-link>
</span>
<span v-else-if="column.prop === 'status'">
<span v-if="scope.row.dataVersion == 'two'"></span>
<span v-else>
<span v-if="scope.row.supervisionStatus == '1' && scope.row.status == '17'">整改办结</span>
<span v-else>{{ projectStatusFormatter(scope.row) }}</span>
</span>
</span>
<span v-else-if="column.prop === 'projectType'">
{{ projectTypeFormatter(scope.row.projectType) }}
</span>
<span v-else-if="column.prop === 'auditType'">
{{ auditTypeFormatter(scope.row.auditType) }}
</span>
<span v-else-if="column.prop === 'auditTypeSasac'">
{{ auditTypeSasacFormatter(scope.row.auditTypeSasac) }}
</span>
<span v-else-if="column.prop === 'projectClassification'">
{{ projectClassificationFormatter(scope.row.projectClassification) }}
</span>
<span v-else-if="column.prop === 'carryOut'">
<el-tag :type="scope.row.carryOut === '是' ? 'success' : 'info'">{{ scope.row.carryOut === '是' ? '是' : '否' }}</el-tag>
</span>
<span v-else>
{{ scope.row[column.prop] }}
</span>
</template>
</el-table-column>
</template>
<el-table-column label="操作" align="center">
</el-table-column>
</template>
</el-table>
// 弹框可排序 可勾选
<div class="pop-absolute2">
<el-popover
ref="tablePopover"
placement="left"
width="512"
popper-class="pop-search"
trigger="click">
<div class="con-padding" v-loading="loading">
<div class="con-header">
<div class="index-title"><img :src="require('@/assets/images/distribution-circle.png')" class="distribution-circle">配置检索项</div>
<i class="el-icon-close" style="cursor: pointer;" @click="closePopover()"></i>
</div>
<draggable v-model="searchList" :animation="200" :ghost-class="'ghost'" class="pop-box">
<div class="pop-block" v-for="(item, index) in searchList" :key="item.num">
<div class="pop-con">
<i class="el-icon-rank"></i>
<div class="pop-right ml-10" :class="{'checked': item.isChecked}" @click="handleSelect(index, item)">{{ item.label }}</div>
<div :class="{'right-icon': item.isChecked}"></div>
</div>
</div>
</draggable>
<div class="float-right mt-20">
<el-button @click="handleTableReset()">恢复默认</el-button>
<el-button type="primary" @click="handleSave('table')">保存</el-button>
<el-button @click="closeTablePopover()">取消</el-button>
</div>
</div>
<svg-icon icon-class="set" class-name="set-icon" slot="reference" @click="handleTriggerClickTable" />
</el-popover>
</div>
import Draggable from 'vuedraggable'
components: {
Draggable
}
tableColumns: [{ // 表格默认头部
num: '1',
label: '项目名称',
prop: 'projectName',
type: 'input',
isChecked: true
},{
num: '11',
label: '审计类型',
prop: 'auditType',
options: [],
dictName: 'audit_type',
type: 'select',
isChecked: true
},{
num: '4',
label: '项目负责人',
prop: 'projectLeader',
type: 'input',
isChecked: true,
formKey: 'auditProjectZero'
},{
num: '5',
label: '审计单位',
prop: 'auditCompanyName',
type: 'input',
isChecked: true
},{
num: '7',
label: '被审计单位',
prop: 'auditeeName',
type: 'input',
isChecked: true
},{
num: '13',
label: '渉审金额(万元)',
prop: 'wadeOnTheAmountOf',
type: 'number',
isChecked: true,
formKey: 'auditProjectZero'
},{
num: '15',
label: '核减金额(万元)',
prop: 'subtractTheAmountOf',
type: 'number',
isChecked: true,
formKey: 'auditProjectZero'
},{
num: '2',
label: '问题个数',
prop: 'questionNumber',
type: 'input',
isChecked: true,
formKey: 'auditProjectZero'
}],
searchHeaderList: [{ // 默认筛选项 自行定义内容
num: '1',
label: '项目名称',
prop: 'projectName',
type: 'input',
isChecked: true
},{
num: '11',
label: '审计类型',
prop: 'auditType',
options: [],
dictName: 'audit_type',
type: 'select',
isChecked: true
},{
num: '5',
label: '审计单位',
prop: 'auditCompanyName',
type: 'input',
isChecked: true
}]
// 查询表格自定义头部
getSearchTableList({
formKey: '',
tableType: '',
pageNum: 1,
pageSize: 50
}).then(response => {
const { data } = response
const arr = deepClone(this.tableColumns)
this.tableColumns = data && Object.keys(data).length > 0 ? data : arr
this.tableColumns.forEach(row => {
row.isChecked = JSON.parse(row.isChecked)
})
})
// 打开弹框做的处理
handleTriggerClickTable() {
this.loading = false
this.searchList = this.$options.data().searchList
if(this.searchList.length === this.tableColumns.length) {
this.searchList = deepClone(this.tableColumns)
}else{
this.searchList.map(item => {
this.tableColumns.forEach(row => {
if(row.prop === item.prop) {
item.isChecked = true
}
})
})
}
}
// 取消按钮
closeTablePopover() {
this.$refs.tablePopover.doClose()
},
// 恢复默认
handleTableReset() {
this.handleTriggerClickTable()
}
// 点击方法
handleSelect(index, data) {
if(data.isChecked === false) {
this.searchList[index].isChecked = true
}else{
this.searchList[index].isChecked = false
}
}
// 保存方法
handleSave(type) {
this.loading = true
const params = {
list: this.searchList
}
addSearchTableList(params).then(response => {
this.init()
this.closeTablePopover()
this.$message.success('配置检索项成功!')
this.loading = false
})
}
el-table实现自定义表格头部展示项
最新推荐文章于 2024-07-24 10:31:42 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)