| | |
| | | <div class="top-box"> |
| | | <div class="table-box" :style="{ width: detailEnter ? '95%' : '100%' }"> |
| | | <el-form ref="form" :model="tableList" :show-message="false" label-position="right"> |
| | | |
| | | <el-table |
| | | ref="fromTable" |
| | | v-if="tableShow" |
| | | :data="tableList.tableData" |
| | | style="width: 100%" |
| | | @selection-change="handleSelectionChange" |
| | |
| | | } |
| | | " |
| | | ></el-input> |
| | | <div class="common-select-btn" @click="clearupColumn(item.prop)"> |
| | | <div class="common-select-btn" @click="clearupColumn(item.prop,i)"> |
| | | <i class="el-icon-remove" title="删除"></i> |
| | | </div> |
| | | </div> |
| | | <span v-else>{{ item.label }}</span> |
| | | <span v-else @click="editColumnInput(item,i, item.prop)">{{ item.label||'--' }}</span> |
| | | </template> |
| | | <!-- column样式 --> |
| | | <template slot-scope="scope"> |
| | |
| | | :disabled="!isOperate" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row, scope) |
| | | commonInputChange(val, item.prop, scope) |
| | | } |
| | | " |
| | | ></el-input> |
| | |
| | | v-for="(item, index) in projectOptions" |
| | | :key="index" |
| | | :label="item.value" |
| | | :value="item.value" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | " |
| | | ></el-input-number> |
| | | </el-form-item> |
| | | <div v-else-if="item.isCallMethod"> |
| | | <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{ |
| | | item.getCallMethod(scope.row[item.prop], scope.row) |
| | | }}</span> |
| | | </div> |
| | | <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </div> |
| | | </div> |
| | | <div v-if="detailEnter" style="margin: 10px"> |
| | | <div class="add-btn-box" @click="addRowClick"> |
| | | <i class="el-icon-circle-plus"></i> |
| | | <div class="add-btn-box"> |
| | | <i class="el-icon-circle-plus" @click="addRowClick"></i> |
| | | </div> |
| | | <!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> --> |
| | | <!-- <el-button size="small" type="primary" disabled>导入明细</el-button> --> |
| | |
| | | |
| | | <script> |
| | | // import { getProductList } from "@/api/common/other" |
| | | import { getDataByType } from "@/api/data" |
| | | export default { |
| | | name: "CommmonFormTableView", |
| | | components: {}, |
| | |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | // 是否可以编辑表头 |
| | | isEdit: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | silkTableList: { |
| | | type: Object, |
| | | default: () => { |
| | |
| | | productList: [], |
| | | tableList: [], |
| | | projectIndex: 0, |
| | | projectOptions: [ |
| | | { id: 1, value: "纤度偏差" }, |
| | | { id: 2, value: "二次变化" }, |
| | | { id: 3, value: "清洁分" }, |
| | | { id: 4, value: "洁净分" }, |
| | | { id: 5, value: "最大偏差" } |
| | | ] |
| | | projectOptions: getDataByType("projectOptions"), |
| | | tableShow:true, |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | this.getTableInfo() |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | 'silkTableList.tableColumn': { |
| | | handler() { |
| | | this.tableShow=false; |
| | | this.$nextTick(()=>{ |
| | | this.tableShow=true; |
| | | this.$forceUpdate() |
| | | }) |
| | | |
| | | }, |
| | | immediate: true |
| | | }, |
| | | }, |
| | | computed: {}, |
| | | methods: { |
| | |
| | | this.$emit("addProjectClick") |
| | | } |
| | | }, |
| | | commonInputChange(val, prop, row, scope) { |
| | | this.$emit("inputContent", val, prop, row, scope) |
| | | commonInputChange(val, prop, scope) { |
| | | this.$emit("inputContent", val, prop, scope) |
| | | }, |
| | | // 删除 |
| | | deleteClick(scope) { |
| | |
| | | // 添加列头部标题输入 |
| | | addColumnInputChange(val, prop) { |
| | | console.log(val, prop, "添加列头部标题输入") |
| | | this.$emit("addColumnInputChange", val, prop) |
| | | }, |
| | | editColumnInput(item,i,prop){ |
| | | if(prop.indexOf('prop')!=-1&&this.isEdit){ |
| | | item.addColumn=true; |
| | | this.$set(this.tableList.tableColumn[i],'addColumn',true) |
| | | this.$forceUpdate() |
| | | this.$emit("editColumnInput", item, i,prop) |
| | | } |
| | | }, |
| | | // 删除列 |
| | | clearupColumn(prop) { |
| | | clearupColumn(prop,index) { |
| | | console.log(prop) |
| | | this.$emit("clearupColumn", prop) |
| | | this.$emit("clearupColumn", prop,index) |
| | | } |
| | | }, |
| | | //解决表格抖动问题 |
| | | beforeUpdate() { |
| | | this.$nextTick(() => { |
| | | this.$refs["fromTable"].doLayout() |
| | | if(this.$refs["fromTable"]){ |
| | | this.$refs["fromTable"].doLayout() |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | font-size: 26px; |
| | | color: #5582f3; |
| | | margin-left: 50px; |
| | | cursor: pointer; |
| | | .el-icon{ |
| | | cursor: pointer; |
| | | padding:5px; |
| | | } |
| | | } |
| | | .add-column-box { |
| | | display: flex; |
| | |
| | | .el-table th.el-table__cell > .cell { |
| | | padding: 0 5px; |
| | | } |
| | | .el-table th.el-table__cell > .cell { |
| | | span{ |
| | | width:100%; |
| | | display:inline-block; |
| | | } |
| | | } |
| | | .el-table__cell{ |
| | | padding: 5px 0 !important; |
| | | height: 35px; |
| | | } |
| | | .el-input__suffix{ |
| | | text-align:right; |
| | | } |
| | | .el-input__inner { |
| | | // text-align: left; |
| | | text-align: center !important; |
| | | // text-align: center !important; |
| | | } |
| | | } |
| | | </style> |