活动介绍

el-table-column的header属性自定义表头模板无效

时间: 2023-08-03 13:05:43 浏览: 270
如果你在 Vue 的 el-table-column 组件中使用了 header 属性自定义表头模板,但是无法生效,可能是因为你没有设置 scoped slot。 你需要在 el-table-column 组件中使用 scoped slot 来渲染自定义的表头模板。示例代码如下: ```html <el-table :data="tableData"> <el-table-column prop="name"> <template slot-scope="scope"> <!-- 使用 scoped slot 渲染自定义表头模板 --> <span>{{ scope.column.label }}</span> <i class="el-icon-arrow-up" @click="sortTable('asc', scope.column.property)"></i> <i class="el-icon-arrow-down" @click="sortTable('desc', scope.column.property)"></i> </template> </el-table-column> </el-table> ``` 在上面的示例中,我们在 el-table-column 组件中使用了 scoped slot,并在模板中渲染了自定义的表头。在 scoped slot 中,我们可以通过 scope 对象来访问列的相关信息,例如 column.label 获取列的标签,column.property 获取列的属性名。 如果你仍然无法生效,请检查是否有其他的样式或脚本影响了表头的渲染。
阅读全文

相关推荐

<el-table ref="tablelist" class="eltable" :data="model.tabledata.list" :height="model.tableheight" size="small" row-key="id" :highlight-current-row="true" @selection-change="handleTableChange" :default-sort="model.sort" @sort-change="sortchange" @row-contextmenu="rightclick" :default-expand-all="(model.config.childs.length>0 || model.config.istree) && model.config.opentable"> <el-table-column v-if="model.config.havecheck" type="selection" width="50" align="center"></el-table-column> <el-table-column v-if="model.config.haveid" type="" fixed="left" prop="id" label="编号" width="70" align="center"></el-table-column> <el-table-column label="明细表" width="80" type="expand"> <template slot-scope="childScope"> <el-table :data="JSON.parse(childScope.row.material)" size="small" class="eltable" :border="true" v-if="JSON.parse(childScope.row.material)&&JSON.parse(childScope.row.material).length" row-key="id"> <el-table-column type="expand" label="二级物料" width="80"> <template slot-scope="childScope1"> <el-table :data="childScope1.row.list" size="small" class="eltable" :border="true" v-if="childScope1.row.list&&childScope1.row.list.length" row-key="id" > <el-table-column label="三级物料" width="80"></el-table-column> <el-table-column label="序号" prop="id"></el-table-column> <el-table-column prop="proname" label="物料名称"></el-table-column> <el-table-column prop="procode" label="成品编码"></el-table-column> <el-table-column prop="specname" label="规格名称"></el-table-column> <el-table-column prop="speccode" label="规格编码"></el-table-column> </el-table> </template> </el-table-column> <el-table-column label="序号" pr

<template> <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="onSubmit(0)"> <el-form-item label="项目" prop="projectId" v-if="projectIdShow" style="margin-left: 0.05rem;"> <el-select v-model="dataForm.projectId" placeholder="请选择项目" > <el-option v-for="item in projectIds" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="电池编码" prop="deviceId"> <el-autocomplete style="width:3.3rem" size="normal" v-model="dataForm.deviceId" :popper-append-to-body="false" :fetch-suggestions="querySearchAsync" @select="handleSelect" placeholder="电池编码,如U231221040200001"> </el-autocomplete> </el-form-item> <el-form-item label="数据来源" prop="flag"> <el-select v-model="dataForm.flag" placeholder="请选择" clearable> <el-option v-for="item in flagIds" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="上报时间"> <el-date-picker v-model="dataForm.starttime" type="datetime" placeholder="选择起始时间" align="right" :picker-options="pickerOptions" clearable> </el-date-picker> 至 <el-date-picker v-model="dataForm.endtime" type="datetime" placeholder="选择结束时间" default-time="00:00:00" clearable> </el-date-picker> </el-form-item> <el-form-item label="SN码" prop="sn"> <el-input v-model="dataForm.sn" placeholder="输入sn码" clearable></el-input> </el-form-item> <el-form-item> <el-input v-model="dataForm.key" placeholder="其他参数名" clearable></el-input> </el-form-item> </el-form-item> <el-form-item label="电池类型" style="margin-left: 0.25rem;"> <el-select v-model="dataForm.batteryKind" placeholder="电池类型" clearable style="width:1.5rem"> <el-option v-for="item in batteryKindOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button @click="onSubmit(0)" type="success" icon="el-icon-search">查询</el-button> <el-button @click="reset()" type="primary" icon="el-icon-refresh">重置</el-button> <el-button v-if="isAuth('maya:mybatteryinfolastest:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> <el-button v-if="isAuth('maya:mybatteryinfolastest:list')" type="info" @click="list2Export()">导出</el-button> </el-form-item> </el-form> <el-table :height="tableHeight" :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column> <el-table-column prop="batteryId" header-align="center" align="center" label="电池编码" width="140"> </el-table-column> <el-table-column prop="sn" header-align="center" align="center" label="sn码" show-overflow-tooltip> </el-table-column> <el-table-column align="center" prop="batteryKind" label="电池类型"> <template slot-scope="scope"> <el-button class="custom-size-my" :stroke-width="5" :type="getBatteryKindStyle(scope.row.batteryKind)" size="mini" round > {{ getBatteryKindText(scope.row.batteryKind) }} </el-button> </template> </el-table-column> <el-table-column prop="uploadTime" header-align="center" align="center" label="上报时间" width="140"> </el-table-column> <el-table-column prop="batteryVoltage" header-align="center" align="center" label="电压(mV)"> </el-table-column> <el-table-column prop="cellVoltage" header-align="center" align="center" label="电芯电压" show-overflow-tooltip> </el-table-column> <el-table-column prop="batteryCurrent" header-align="center" align="center" label="电流(mA)"> </el-table-column> <el-table-column prop="batterySoc" header-align="center" align="center" label="SOC(%)"> </el-table-column> <el-table-column prop="batteryHardVersion" header-align="center" align="center" label="硬件版本"> </el-table-column> <el-table-column prop="batterySoftVersion" header-align="center" align="center" label="软件版本" width="120"> </el-table-column> <el-table-column prop="batteryWorkModeValue" header-align="center" align="center" label="电池状态" width="140"> </el-table-column> <el-table-column prop="batteryProtectCode" header-align="center" align="center" label="保护状态"> </el-table-column> <el-table-column prop="batteryErrorCode" header-align="center" align="center" label="电池故障码" width="100" show-overflow-tooltip> </el-table-column> <el-table-column prop="batteryTemperatureMax" header-align="center" align="center" label="电芯最高温度(℃)" width="140"> </el-table-column> <el-table-column prop="batteryTemperatureMin" header-align="center" align="center" label="电芯最低温度(℃)" width="140"> </el-table-column> <el-table-column prop="batteryVoltageMax" header-align="center" align="center" label="电芯最高电压" width="140"> </el-table-column> <el-table-column prop="batteryVoltageMin" header-align="center" align="center" label="电芯最低电压" width="140"> </el-table-column> <el-table-column prop="mosStatus" header-align="center" align="center" label="MOS状态"> </el-table-column> <el-table-column prop="mosTemp" header-align="center" align="center" label="MOS温度(℃)" width="100"> </el-table-column> <el-table-column prop="batteryCycleTimes" header-align="center" align="center" label="循环次数"> </el-table-column> <el-table-column prop="soh" header-align="center" align="center" label="SOH"> </el-table-column> <el-table-column prop="batteryTemperatureAvg" header-align="center" align="center" label="平均温度(℃)" width="100"> </el-table-column> <el-table-column prop="chargeMode" header-align="center" align="center" label="充电模式" :formatter = "chargeModeFormat" > </el-table-column> <el-table-column prop="lowBatteryWarn" header-align="center" align="center" label="低电量提示" width="100" :formatter = "lowBatteryWarnFormat" > </el-table-column> <el-table-column prop="chargeCurrentMax" header-align="center" align="center" label="最大充电电流(mA)" width="140"> </el-table-column> <el-table-column prop="dischargeCurrentMax" header-align="center" align="center" label="最大放电电流(mA)" width="140"> </el-table-column> <el-table-column prop="chargeCurrentAvg" header-align="center" align="center" label="平均充电电流(mA)" width="140"> </el-table-column> <el-table-column prop="dischargeCurrentAvg" header-align="center" align="center" label="平均放电电流(mA)" width="140"> </el-table-column> <el-table-column prop="steadyStatus" header-align="center" align="center" label="均衡状态"> </el-table-column> <el-table-column prop="imei" header-align="center" align="center" label="IMEI" width="150"> </el-table-column> <el-table-column prop="imsi" header-align="center" align="center" label="IMSI" width="150"> </el-table-column> <el-table-column prop="iccid" header-align="center" align="center" label="ICCID" width="160"> </el-table-column> <el-table-column prop="trackerSoftwareVersion" header-align="center" align="center" label="tracker软件版本" width="200"> </el-table-column> <el-table-column prop="locationMode" header-align="center" align="center" label="定位模式"> </el-table-column> <el-table-column prop="longitude" header-align="center" align="center" label="经度" width="150"> </el-table-column> <el-table-column prop="longitudeDirection" header-align="center" align="center" label="经度方向"> </el-table-column> <el-table-column prop="latitude" header-align="center" align="center" label="纬度" width="150"> </el-table-column> <el-table-column prop="latitudeDirection" header-align="center" align="center" label="纬度方向"> </el-table-column> <el-table-column prop="gpsCog" header-align="center" align="center" label="对地航向角(°)" width="120"> </el-table-column> <el-table-column prop="gpsSpeed" header-align="center" align="center" label="gps速度(Km/h)" width="120"> </el-table-column> <el-table-column prop="gpsSignal" header-align="center" align="center" label="gps信号强度" width="120"> </el-table-column> <el-table-column prop="satelliteNum" header-align="center" align="center" label="定位卫星数" width="100"> </el-table-column> <el-table-column prop="flag" header-align="center" align="center" label="数据来源" :formatter = "flagFormat"> </el-table-column> <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" width="140"> </el-table-column> <el-table-column prop="updateTime" header-align="center" align="center" label="更新时间" width="140"> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <template slot-scope="scope"> <el-button v-if="isAuth('maya:mybatteryinfolastest:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> <el-button v-if="isAuth('maya:mybatteryinfolastest:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </template> <script> import AddOrUpdate from './mybatteryinfolastest-add-or-update' import { debounce } from '@/utils' // 表格滚动 export default { data () { return { clientHeight: document.documentElement.clientHeight, tableHeight:640,// 定义table高度 // 1:设备主动请求或上报 2:平台主动推送或下指令 3:平台指令反馈的结果 flagIds:[ { value: '1', label: '设备主动请求或上报' }, // { // value: '2', // label: '平台主动推送或下指令' // }, { value: '3', label: '平台指令反馈的结果' }], batteryKindOptions: [ { value: '0', label: '运营' },{ value: '1', label: '售后' },{ value: '2', label: '内测' },{ value: '3', label: '报废' }], dataForm: { sn: '', starttime: '', endtime: '', batteryKind: '', flag: '', deviceId: '', key: '', projectId: '' }, projectIdShow: true, snExportShow: false, projectIds:[], dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, updateVisible: false, resultShowVisible: false, pickerOptions: { shortcuts: [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }, { text: '一个月前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', date); } }, { text: '三个月前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', date); } }] } } }, components: { AddOrUpdate }, activated () { this.getQueryMenus() this.getDataList() }, methods: { getQueryMenus () { this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/getmenus), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { // this.provices = data.data.provices // this.sysStatuses = data.data.sysStatuses // this.alarmStatuses = data.data.alarmStatuses if(data.data.projectPerm===1){ this.dataForm.projectId = data.data.projectPermData //data.data.projectPerm this.projectIdShow = false // 这里只为马牙项目设置了导出功能,项目ID==38 if(data.data.projectPermData === 38 || data.data.projectPermData==='38' || data.data.projectPermData === 39 || data.data.projectPermData==='39' || data.data.projectPermData === 40 || data.data.projectPermData==='40'){ this.snExportShow = true }else{ this.snExportShow = false } }else{ this.dataForm.projectId = data.data.projectPermData //data.data.projectPerm this.projectIds = data.data.projectIds this.projectIdShow = true // 这里只为马牙项目设置了导出功能,项目ID==38 if(data.data.projectPermData === 38 || data.data.projectPermData==='38' || data.data.projectPermData === 39 || data.data.projectPermData==='39' || data.data.projectPermData === 40 || data.data.projectPermData==='40'){ this.snExportShow = true }else{ this.snExportShow = false } } if(this.dataForm.projectId === '' || this.dataForm.projectId === undefined || this.dataForm.projectId === null){ this.dataForm.projectId = 38; this.snExportShow = true } // this.customIds = data.data.customIds } }) }, // 充电模式 1--标准充;2--快充;3--盲充; chargeModeFormat (row, column) { console.log(row.chargeMode) if (row.chargeMode === 1) { return '标准充' } else if (row.chargeMode === 2) { return '快充' }else if (row.chargeMode === 3) { return '盲充' }else{ return '未知' } }, lowBatteryWarnFormat (row, column) { console.log(row.lowBatteryWarn) if (row.lowBatteryWarn === 1) { return '告警' } else{ return '否' } }, flagFormat (row, column) { console.log(row.flag) if (row.flag === 1) { return '设备上报' } else if (row.flag === 2) { return '平台指令' } }, reset(){ this.dataForm = { key: undefined, deviceId: undefined, starttime: undefined, endtime: undefined, flag: undefined, projectId: undefined, }; this.$refs["dataForm"].resetFields(); this.onSubmit(0) }, querySearchAsync(queryString, cb) { clearTimeout(1000); var results = [] // alert('queryString='+queryString) if (queryString == '') { cb(results); } else { //掉接口需要的参数 this.$http({ url: this.$http.adornUrl('/mqtt/mqtttriad/getDeviceIds'), method: 'get', params: this.$http.adornParams({ 'deviceId': queryString, 'projectParameter': this.dataForm.projectParameter }) }).then(({data}) => { if (data && data.code === 0) { // alert(data.data.length) var result = data.data //循环放到一个远程搜索需要的数组 for (let i = 0; i < result.length; i++) { const element = result[i]; // alert(element) results.push({ value: element, id: i }) } cb(results); } else { console.log('没有数据的显示') results = [] cb(results); } }) } }, //点击出现搜索后点击的每一项 handleSelect(item) { this.id = item.id this.name = item.value }, onSubmit(pgindex) { //alert("刷新一下") // 添加参数判断,防止总是跳到第一页 if (pgindex==1) { // alert(pgindex); this.getDataList() }else{ // alert(pgindex); this.pageIndex = 1 this.getDataList() } }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, // 导出当前列表 list2Export() { this.$confirm(确定对数据进行导出操作?, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('/maya/mybatteryinfolastest/list2Export'), method: 'get', params: this.$http.adornParams({ 'key': this.dataForm.key, 'deviceId': this.dataForm.deviceId, 'starttime': this.dataForm.starttime, 'endtime': this.dataForm.endtime, 'sn': this.dataForm.sn, 'flag': this.dataForm.flag, 'projectId': this.dataForm.projectId }) }).then(({data}) => { if (data && data.code === 0) { this.exportList = data.data require.ensure([], () => { const { export_json_to_excel } = require('../../../vendor/Export2Excel') // const tHeader = ['ID','设备ID','IMEI','ICCID','IMSI','CSQ','经度标识','经度','纬度标识','纬度','GPS行驶速度(km/h)','BMS软件版本号','tracker软件版本','信号强度','GPS定位卫星数','SOC(%)','循环次数','温度最高(电芯℃)','温度最低(电芯℃)','均衡状态','MOS温度(℃)','MOS状态','电池整包电压(mV)','电压最高(单节电芯mV)','电压最低(单节电芯mV)','全电芯电压(mV)','电池包状态','电流(mA)','上传时间','保护状态码','原始数据','故障码','入库时间','更新时间']; // const filterVal = ['id','batteryId','imei','iccid','imsi','csq','longitudeDirection','longitude','latitudeDirection','latitude','gpsSpeed','batterySoftVersion','trackerSoftwareVersion','gpsSignal','satelliteNum','batterySoc','batteryCycleTimes','batteryTemperatureMax','batteryTemperatureMin','steadyStatus','mosTemp','mosStatus','batteryVoltage','batteryVoltageMax','batteryVoltageMin','cellVoltage','batteryWorkMode','batteryCurrent','uploadTime','batteryProtectCode','payload','batteryErrorCode','createTime','updateTime']; const tHeader = ['ID','设备ID','SN码','项目ID','IMEI','ICCID','IMSI','CSQ','经度标识','经度','纬度标识','纬度','GPS行驶速度(km/h)','对地航向角(°)','BMS软件版本号','tracker软件版本','信号强度','GPS定位卫星数','SOC(%)','循环次数','温度最高(电芯℃)','温度最低(电芯℃)','均衡状态','MOS温度(℃)','MOS状态','电池整包电压(mV)','电压最高(单节电芯mV)','电压最低(单节电芯mV)','全电芯电压(mV)','电池包状态','电流(mA)','上传时间','保护状态码','故障码','SOH','平均温度','充电模式(1标准充2快充3盲充)','低电量提示','最大充电电流','最大放电电流','平均充电电流','平均放电电流','入库时间','更新时间']; const filterVal = ['id','batteryId','sn','projectId','imei','iccid','imsi','csq','longitudeDirection','longitude','latitudeDirection','latitude','gpsSpeed','gpsCog','batterySoftVersion','trackerSoftwareVersion','gpsSignal','satelliteNum','batterySoc','batteryCycleTimes','batteryTemperatureMax','batteryTemperatureMin','steadyStatus','mosTemp','mosStatus','batteryVoltage','batteryVoltageMax','batteryVoltageMin','cellVoltage','batteryWorkMode','batteryCurrent','uploadTime','batteryProtectCode','batteryErrorCode','soh','batteryTemperatureAvg','chargeMode','lowBatteryWarn','chargeCurrentMax','dischargeCurrentMax','chargeCurrentAvg','dischargeCurrentAvg','createTime','updateTime']; const list = this.exportList; const data = this.formatJson(filterVal,list); export_json_to_excel(tHeader, data, '马牙电池最新数据导出-('+this.dataForm.key+'_'+this.dataForm.starttime+'-'+this.dataForm.endtime+')'); }) } else { this.$message.error(data.msg) } }) }) }, // 获取数据列表 getDataList () { this.dataListLoading = true this.$http({ url: this.$http.adornUrl('/maya/mybatteryinfolastest/list'), method: 'get', params: this.$http.adornParams({ 'page': this.pageIndex, 'limit': this.pageSize, 'key': this.dataForm.key, 'deviceId': this.dataForm.deviceId, 'starttime': this.dataForm.starttime, 'endtime': this.dataForm.endtime, 'sn': this.dataForm.sn, 'batteryKind': this.dataForm.batteryKind, 'flag': this.dataForm.flag, 'projectId': this.dataForm.projectId }) }).then(({data}) => { if (data && data.code === 0) { this.dataList = data.page.list this.totalPage = data.page.totalCount } else { this.dataList = [] this.totalPage = 0 } this.dataListLoading = false }) }, // 每页数 sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页 currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, // 多选 selectionChangeHandle (val) { this.dataListSelections = val }, // 新增 / 修改 addOrUpdateHandle (id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) }, getBatteryKindStyle(kind) { const styleMap = { 0: 'success', 1: 'warning', 2: 'primary', 3: 'danger' }; return styleMap[kind] || 'info'; }, getBatteryKindText(kind) { const map = { 0: '运营', 1: '售后', 2: '内测', 3: '报废' }; return map[kind] || '未知类型'; }, // 删除 deleteHandle (id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.id }) this.$confirm(确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('/maya/mybatteryinfolastest/delete'), method: 'post', data: this.$http.adornData(ids, false) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }) } } } </script> 新增一个导入excel按钮,以deviceId为第一列,batteryKind为第二列,解析后以map传入后台,excel不需要表头

<el-dialog :title="detailTitle" v-model="openDetail" style="width: 1400px; height: 800px" append-to-body > <el-form ref="powerRef" :model="main" :rules="rules" label-width="80px"> <el-row> <el-col :span="8"> <el-form-item label="年月" prop="years" label-width="140"> <el-date-picker clearable v-model="main.years" type="month" format="YYYY/MM" value-format="YYYY/MM" placeholder="Please select" :readonly="main.reviewStatus != '4'" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="绿电溢价" prop="premium" label-width="140"> <el-input v-model="main.premium" placeholder="Please input" :readonly="main.reviewStatus != '4'" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="厂别" prop="fact" label-width="140"> <el-input v-model="main.fact" placeholder="Please input" readonly /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="启动人" prop="nickName" label-width="140"> <el-input v-model="main.nickName" placeholder="Please input" readonly /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="审核状态" prop="reviewStatus" label-width="140" > <dict-tag :options="rsc_review_status" :value="main.reviewStatus" /> </el-form-item> </el-col> </el-row> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAddDetail" v-hasPermi="['rsc:power:add']" >新增</el-button > </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDeleteDetail" v-hasPermi="['rsc:power:remove']" >删除</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Upload" @click="handleImport" v-hasPermi="['rsc:power:import']" >导入</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Upload" @click="handleImportAnnex" v-hasPermi="['rsc:power:import']" >附件</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="View" @click="handleView" v-hasPermi="['rsc:power:import']" >预览附件</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="View" @click="handleDeleteFile" v-hasPermi="['rsc:power:import']" >删除附件</el-button > </el-col> </el-row> <el-table v-loading="loading" :data="powerDataList" @selection-change="handleDetailSelectionChange" :summary-method="getSummeries" show-summary border > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="區域" align="center" prop="locationName" width="120" > </el-table-column> <el-table-column label="动力用量(度)" align="center" prop="powerUsage" width="120" > </el-table-column> <el-table-column label="照明用量(度)" align="center" prop="lightingUsage" width="120" > </el-table-column> <el-table-column label="线路损耗(度)" align="center" prop="lineLoss" width="120" > </el-table-column> <el-table-column label="市電(度)" align="center" prop="electricity" width="100" > </el-table-column> <el-table-column label="綠電(度)" align="center" prop="greenElectricity" width="100" > </el-table-column> <el-table-column label="電網用电量合計(度)" align="center" prop="powerGridTotal" width="160" > </el-table-column> <el-table-column label="幣別" align="center" prop="currency"> <template #default="scope"> <dict-tag :options="rsc_currency_type" :value="scope.row.currency" /> </template> </el-table-column> <el-table-column label="单价(元/度)" align="center" prop="unitPrice" width="120" > </el-table-column> <el-table-column label="電網用电金額(元)" align="center" prop="electricityBills" width="150" > </el-table-column> <el-table-column label="光伏用電量(度)" align="center" prop="photovoltaicUsage" width="140" > </el-table-column> <el-table-column label="光伏用電單價(元/度)" align="center" prop="photovoltaicUnitPrice" width="160" > </el-table-column> <el-table-column label="光伏用電金額(元)" align="center" prop="photovoltaicBills" width="150" > </el-table-column> <el-table-column label="用電量合計" align="center" prop="electricityTotal" width="100" > </el-table-column> <el-table-column label="用電金額合計" align="center" prop="totalBills" width="120" > </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140" fixed="left" > <template #default="scope"> <el-tooltip content="修改" placement="top"> <el-button link type="primary" icon="Edit" @click="handleUpdateDetail(scope.row)" v-hasPermi="['rsc:power:edit']" ></el-button> </el-tooltip> </template> </el-table-column> </el-table> <template #footer> <el-button type="primary" @click="savePower" v-if="main.reviewStatus != '1'" >保存</el-button > <el-button type="primary" @click="startProcess" v-if="main.reviewStatus == '4'" >提交</el-button > <el-button type="primary" @click="cacelPower" v-if=" main.reviewStatus != 1 && main.reviewStatus != 4 && main.reviewStatus != null " >取消申请</el-button > <el-button @click="cancelDetail">取 消</el-button> </template> </el-dialog> 分析以上代码,帮我实现table表头与合计行的固定,不随表格列滚动

最新推荐

recommend-type

获取本机IP地址的程序源码分析

从给定文件信息中我们可以提取出的关键知识点是“取本机IP”的实现方法以及与之相关的编程技术和源代码。在当今的信息技术领域中,获取本机IP地址是一项基本技能,广泛应用于网络通信类的软件开发中,下面将详细介绍这一知识点。 首先,获取本机IP地址通常需要依赖于编程语言和操作系统的API。不同的操作系统提供了不同的方法来获取IP地址。在Windows操作系统中,可以通过调用Windows API中的GetAdaptersInfo()或GetAdaptersAddresses()函数来获取网络适配器信息,进而得到IP地址。在类Unix操作系统中,可以通过读取/proc/net或是使用系统命令ifconfig、ip等来获取网络接口信息。 在程序设计过程中,获取本机IP地址的源程序通常会用到网络编程的知识,比如套接字编程(Socket Programming)。网络编程允许程序之间进行通信,套接字则是在网络通信过程中用于发送和接收数据的接口。在许多高级语言中,如Python、Java、C#等,都提供了内置的网络库和类来简化网络编程的工作。 在网络通信类中,IP地址是区分不同网络节点的重要标识,它是由IP协议规定的,用于在网络中唯一标识一个网络接口。IP地址可以是IPv4,也可以是较新的IPv6。IPv4地址由32位二进制数表示,通常分为四部分,每部分由8位构成,并以点分隔,如192.168.1.1。IPv6地址则由128位二进制数表示,其表示方法与IPv4有所不同,以冒号分隔的8组16进制数表示,如2001:0db8:85a3:0000:0000:8a2e:0370:7334。 当编写源代码以获取本机IP地址时,通常涉及到以下几个步骤: 1. 选择合适的编程语言和相关库。 2. 根据目标操作系统的API或系统命令获取网络接口信息。 3. 分析网络接口信息,提取出IP地址。 4. 将提取的IP地址转换成适合程序内部使用的格式。 5. 在程序中提供相应功能,如显示IP地址或用于网络通信。 例如,在Python中,可以使用内置的socket库来获取本机IP地址。一个简单的示例代码如下: ```python import socket # 获取主机名 hostname = socket.gethostname() # 获取本机IP local_ip = socket.gethostbyname(hostname) print("本机IP地址是:", local_ip) ``` 在实际应用中,获取本机IP地址通常是为了实现网络通信功能,例如建立客户端与服务器的连接,或者是在开发涉及到IP地址的其他功能时使用。 关于文件名称“getIP”,这是一个自解释的文件名,明显表示该文件或程序的作用是获取本机的IP地址。从标签“控件 源码 网络通信类 资源”中我们可以看出,这个文件很可能是一个可以嵌入其他软件中的代码片段,用以实现网络通信功能的一部分,具有较高的灵活性和重用性。 综上所述,获取本机IP地址是一个涉及到操作系统API、网络编程以及特定编程语言知识的技能。它不仅需要对编程语言提供的库函数有深入的理解,还要对操作系统的网络配置和IP协议有足够的认识。通过阅读和分析相关的源代码,如“getIP”,可以加深对网络编程实现细节的理解,并能够在实际开发中快速地应用这一技术。
recommend-type

【权威指南】:Win11笔记本上RTX4080驱动的安装与调试秘籍

# 1. Win11笔记本与RTX4080显卡介绍 随着技术的不断发展,笔记本电脑已不再是仅仅满足办公需求的移动设备,而是逐渐成为可以胜任复杂图形处理和游戏任务的强大工具。微软推出的Windows 11操作系统,以其全新的用户界面和改进的系统性能,为用户提供了更为流畅的操作体验。而在硬件方面,NVIDIA的RTX 4080显卡以其卓越的图形处理能力和AI支持,为笔记本电脑带来了前所未有的性能提升。本章节将带您初步了解Windows 11笔记本与NVIDIA RTX 4080显卡的基础信息,为进一步深入探讨它们的优化和调试技巧奠定基础。 ## 1.1 Win11笔记本的优势 Windows
recommend-type

windows环境举例

<think>好的,用户现在想在Windows环境下创建C函数库,需要具体的方法和示例代码。我需要结合之前的回答和用户提供的引用内容来给出合适的指导。 首先回顾之前的回答,用户已经了解了在Linux下创建静态库和动态库的方法,现在需要切换到Windows环境。根据引用[2],Windows下的C标准库和动态链接库的处理与Linux不同,比如使用dlfcn.h在Linux,而Windows可能需要其他方式。另外,引用[1]提到了在Windows下配置gcc环境(MinGW-w64),这可能是一个关键点,因为用户可能需要使用MinGW来编译库。 用户提供的引用[3]提到了使用MSVC编译器,这
recommend-type

QQ自动发送/回复系统源代码开放

根据提供的文件信息,我们可以了解到以下几点关键的知识点: ### 标题:“qqhelp” 1. **项目类型**: 标题“qqhelp”暗示这是一个与QQ相关的帮助工具或项目。QQ是中国流行的即时通讯软件,因此这个标题表明项目可能提供了对QQ客户端功能的辅助或扩展。 2. **用途**: “help”表明此项目的主要目的是提供帮助或解决问题。由于它提到了QQ,并且涉及“autosend/reply”功能,我们可以推测该项目可能用于自动化发送消息回复,或提供某种形式的自动回复机制。 ### 描述:“I put it to my web, but nobody sendmessage to got the source, now I public it. it supply qq,ticq autosend/reply ,full sourcecode use it as you like” 1. **发布情况**: 描述提到该项目原先被放置在某人的网站上,并且没有收到请求源代码的消息。这可能意味着项目不够知名或者需求不高。现在作者决定公开发布,这可能是因为希望项目能够被更多人了解和使用,或是出于开源共享的精神。 2. **功能特性**: 提到的“autosend/reply”表明该项目能够实现自动发送和回复消息。这种功能对于需要进行批量或定时消息沟通的应用场景非常有用,例如客户服务、自动化的营销通知等。 3. **代码可用性**: 作者指出提供了“full sourcecode”,意味着源代码完全开放,用户可以自由使用,无论是查看、学习还是修改,用户都有很大的灵活性。这对于希望学习编程或者有特定需求的开发者来说是一个很大的优势。 ### 标签:“综合系统类” 1. **项目分类**: 标签“综合系统类”表明这个项目可能是一个多功能的集成系统,它可能不仅限于QQ相关的功能,还可能包含了其他类型的综合服务或特性。 2. **技术范畴**: 这个标签可能表明该项目的技术实现比较全面,可能涉及到了多个技术栈或者系统集成的知识点,例如消息处理、网络编程、自动化处理等。 ### 压缩包子文件的文件名称列表: 1. **Unit1.dfm**: 这是一个Delphi或Object Pascal语言的窗体定义文件,用于定义应用程序中的用户界面布局。DFM文件通常用于存储组件的属性和位置信息,使得开发者可以快速地进行用户界面的设计和调整。 2. **qqhelp.dpr**: DPR是Delphi项目文件的扩展名,包含了Delphi项目的核心设置,如程序入口、使用的单元(Units)等。这个文件是编译和构建Delphi项目的起点,它能够帮助开发者了解项目的组织结构和编译指令。 3. **Unit1.pas**: PAS是Delphi或Object Pascal语言的源代码文件。这个文件可能包含了与QQ帮助工具相关的核心逻辑代码,例如处理自动发送和回复消息的算法等。 4. **readme.txt**: 这是一个常见的文本文件,包含项目的基本说明和使用指导,帮助用户了解如何获取、安装、运行和定制该项目。README文件通常是用户与项目首次交互时首先阅读的文件,因此它对于一个开源项目的用户友好度有着重要影响。 通过以上分析,我们可以看出“qqhelp”项目是一个针对QQ通讯工具的自动化消息发送与回复的辅助工具。项目包含完整的源代码,用户可以根据自己的需要进行查看、修改和使用。它可能包含Delphi语言编写的窗体界面和后端逻辑代码,具有一定的综合系统特性。项目作者出于某种原因将其开源,希望能够得到更广泛的使用和反馈。
recommend-type

【7步打造Win11深度学习利器】:Tensorflow-GPU与RTX4080终极优化指南

# 1. 深度学习与Windows 11的融合 在人工智能时代,深度学习已渗透到生活的方方面面,而Windows 11作为最新一代的操作系统,为深度学习提供了一个高效的工作平台。本章节将探讨深度学习技术如何与Windows 11系统融合,以及这一
recommend-type

ue画笔画画蓝图版

<think>我们正在讨论的是在UnrealEngine中使用蓝图实现画笔绘画功能。根据用户需求,重点在于通过蓝图系统实现类似毛笔的绘画效果。结合之前的回答和引用内容,我们将详细展开实现方法。核心思路:通过捕捉输入轨迹,动态生成笔触网格,并应用材质模拟墨迹效果。###详细实现步骤####1.创建绘画蓝图创建一个名为`BP_PaintBrush`的Actor蓝图:-**根组件**:SceneComponent-**关键组件**:-`SplineComponent`:用于存储绘画路径点-`InstancedStaticMeshComponent`:高效渲染重复笔触段(替代单个SplineMesh组
recommend-type

VB.NET图表曲线组件实现多种图表绘制

在深入讨论所给文件信息中的知识点之前,我们首先需要明确这些信息所代表的内容。标题指出我们所讨论的是一款在VB.NET环境中使用的“三维图表曲线组件”。从描述中我们可以了解到该组件的功能特性,即它能够绘制包括柱状图、线条曲线图和饼图在内的多种类型图表,并且支持图例的展示。此外,组件的色彩使用比较鲜艳,它不仅适用于标准的Windows Forms应用程序,还能够在ASP.NET环境中使用。而“压缩包子文件的文件名称列表”提供的信息则指向了可能包含该组件示例代码或说明文档的文件名,例如“PSC_ReadMe_4556_10.txt”可能是一个说明文档,而“GraphingV3Testing”和“Graphing.V3”则可能是一些测试文件或组件的实际使用案例。 下面详细说明标题和描述中提到的知识点: 1. VB.NET环境中的图表组件开发: 在VB.NET中开发图表组件需要开发者掌握.NET框架的相关知识,包括但不限于Windows Forms应用程序的开发。VB.NET作为.NET框架的一种语言实现,它继承了.NET框架的面向对象特性和丰富的类库支持。图表组件作为.NET类库的一部分,开发者可以通过继承相关类、使用系统提供的绘图接口来设计和实现图形用户界面(GUI)中用于显示图表的部分。 2. 图表的类型和用途: - 柱状图:主要用于比较各类别数据的数量大小,通过不同长度的柱子来直观显示数据间的差异。 - 线条曲线图:适用于展示数据随时间或顺序变化的趋势,比如股票价格走势、温度变化等。 - 饼图:常用于展示各部分占整体的比例关系,可以帮助用户直观地了解数据的组成结构。 3. 图例的使用和意义: 图例在图表中用来说明不同颜色或样式所代表的数据类别或系列。它们帮助用户更好地理解图表中的信息,是可视化界面中重要的辅助元素。 4. ASP.NET中的图表应用: ASP.NET是微软推出的一种用于构建动态网页的框架,它基于.NET平台运行。在ASP.NET中使用图表组件意味着可以创建动态的图表,这些图表可以根据Web应用程序中实时的数据变化进行更新。比如,一个电子商务网站可能会利用图表组件来动态显示产品销售排行或用户访问统计信息。 5. 色彩运用: 在设计图表组件时,色彩的运用非常关键。色彩鲜艳不仅能够吸引用户注意,还能够帮助用户区分不同的数据系列。正确的色彩搭配还可以提高信息的可读性和美观性。 在技术实现层面,开发者可能需要了解如何在VB.NET中使用GDI+(Graphics Device Interface)进行图形绘制,掌握基本的绘图技术(如画线、填充、颜色混合等),并且熟悉.NET提供的控件(如Panel, Control等)来承载和显示这些图表。 由于提供的文件名列表中包含有"Testing"和".txt"等元素,我们可以推测该压缩包内可能还包含了与图表组件相关的示例程序和使用说明,这对于学习如何使用该组件将十分有用。例如,“GraphingV3Testing”可能是一个测试项目,用于在真实的应用场景中检验该图表组件的功能和性能;“PSC_ReadMe_4556_10.txt”可能是一个详细的用户手册或安装说明,帮助用户了解如何安装、配置和使用该组件。 总结而言,了解并掌握在VB.NET环境下开发和使用三维图表曲线组件的知识点,对从事.NET开发的程序员来说,不仅可以增强他们在数据可视化方面的技能,还可以提高他们构建复杂界面和动态交互式应用的能力。
recommend-type

【MultiExtractor_Pro实战演练】:8个复杂场景的高效数据提取解决方案

# 摘要 本文介绍了MultiExtractor_Pro工具的概述、基本使用技巧、实战演练、高级功能应用以及案例研究与展望。首先,详细说明了MultiExtractor_Pro的安装过程和用户界面布局,阐述了核心功能组件及其操作方法。接着,讲述了配置提取模板、设置提取任务以及实时数据提取与预览技巧。在实
recommend-type

k-means聚类分析算法推导

<think>首先,用户要求理解k-means聚类算法的数学推导过程。用户的问题是:“我想理解k-means聚类分析算法的数学推导过程 请问k-means clustering algorithm mathematical derivation steps”。所以,我需要提供k-means算法的数学推导步骤。 从系统级指令中,我有一些规则: - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - 使用LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,例如[^1]。 - 回答结构清晰,帮助用
recommend-type

创意智力游戏:Pintu拼图挑战

标题“拼图”所揭示的知识点主要集中在智力游戏的范畴内,强调了对用户思维能力的挑战和对图像处理技术的应用。 **知识点详细解释:** 1. **智力游戏的定义与特点:** 智力游戏是一种需要玩家运用逻辑思维、策略分析、记忆力和空间想象力等智力因素来解决问题的游戏。这类游戏往往不仅仅是简单的娱乐,而是能够锻炼玩家的大脑,提高玩家的思维能力。在这个游戏中,玩家需要通过逻辑推断和视觉辨识将打乱的图片块重新组合成完整的图像,这正是智力游戏最典型的特征。 2. **游戏重新编写的意义与改进:** 根据描述,该拼图游戏是对原版“ISee”中的Demo进行重新编写的改进版。重点克服了原Demo中图像拉伸导致的图像损失问题。这表明在游戏开发中,图像处理技术是非常关键的。图像拉伸是图像处理中的常见问题,尤其是在缩放图片时,如何保持图像质量,防止图像失真和像素化是技术上的挑战。 3. **游戏的基本玩法和操作:** 游戏的玩法通过几个简单的步骤来完成。首先,玩家需要在菜单中选择加载图片,这样图片便会显示在游戏窗口上,并根据玩家的桌面分辨率自动调整大小。为了对比,左侧会显示原图的缩略图。接下来,玩家可以根据选择的难度水平(初级难度),来决定图片被切分成多少块。难度越高,块数就越多,每块越小,并且块的形状和位置也会被重新排列。通过鼠标点击和拖动的方式,玩家需要将打乱的图片块移动到正确的位置,直至拼回完整的图像。 4. **图像处理技术在游戏中的应用:** 图像处理技术在游戏中扮演着关键角色。它不仅涉及图像的读取、存储和显示,还包括图像的分割、缩放、变形和色彩调整等处理过程。在拼图游戏中,需要处理的图像技术点包括: - **图像缩放**:在不同分辨率的屏幕上适应显示,需要对加载的图片进行适当的缩放处理。 - **图像分割**:将图片分割成多个碎片块,每块碎片需要保持图像的连贯性和辨识度。 - **图像变形**:为了在新位置适应,每块碎片可能需要进行变形处理以符合游戏逻辑。 - **图像质量优化**:保证在图片缩放和变形过程中,图像质量不会下降,没有明显的失真或像素化现象。 5. **游戏的开发和文件组成:** 从压缩包子文件的文件名称列表中可以看出,游戏由多个组件组成,包括程序运行必须的DLL文件(动态链接库),如vpictureu.dll和victorycoreu.dll;可执行程序Pintu.exe;以及游戏所需的示例图片pintu.JPG。这些文件共同构成了一个完整的软件应用。 6. **软件与硬件的交互:** 游戏的成功运行依赖于软件与硬件的良好交互,包括CPU的计算能力、内存的读写速度、显卡的图像渲染能力等。在游戏运行过程中,玩家的输入操作(如鼠标点击和拖动)需要被快速准确地转换为游戏逻辑的响应,这对软件的响应速度和硬件的性能都是一个考验。 总结以上,该拼图游戏涉及的知识点涵盖了智力游戏的特点、图像处理技术的应用以及软件开发的各个方面。通过解决图片块的拼凑问题,游戏不仅为玩家提供了乐趣,也潜移默化地锻炼了玩家的智力与反应能力。同时,该游戏的开发细节也展示了软件工程中的文件管理、软件组件的协作以及软件与硬件交互的基本知识。