zoukankan      html  css  js  c++  java
  • 获取某一单元格的值,赋值给这一列的所有格

    <template>
      <div>
        <el-table
          ref="table"
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          :header-cell-style="{'background':'#F5F4F7'}"
          class="tb-edit"
          :cell-class-name="tableCellClassName"
          @cell-click="cellClick"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          />
          <el-table-column
            prop="strdepartmentname"
            label="科室名称"
          >
            <template v-slot="scope">
              <div :class="{'red':scope.row.isRed}">{{ scope.row.strdepartmentname }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="dblphysicianzr"
            label="主任医师系数"
          >
            <template v-slot="scope">
              <el-input
                v-model="scope.row.dblphysicianzr"
                placeholder="请输入"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="checkRatio(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="dblphysicianzz"
            label="主治医师系数"
          >
            <template v-slot="scope">
              <el-input
                v-model="scope.row.dblphysicianzz"
                placeholder="请输入"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="checkRatio(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="dblphysicianzy"
            label="住院医师系数"
          >
            <template v-slot="scope">
              <el-input
                v-model="scope.row.dblphysicianzy"
                placeholder="请输入"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="checkRatio(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="paging.total > 0"
          background
          :current-page.sync="paging.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="queryListByPage"
          @current-change="queryListByPage"
        />
      </div>
    </template>

    <script>
    import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'
    import { queryList, physicratioAdd } from '@/api/setting/doctor-allocation'
    import { accAdd } from '@/utils/decimal.js'
    import { numberFourDec } from '@/utils/validate'
    export default {
      name: 'DoctorTable',
      mixins: [calculateCommonTableHeight],
      props: {
        searchForm: {
          type: Object,
          default: () => {}
        }
      },
      data() {
        return {
          offset: 110,
          tableData: [],
          paging: {
            total: 0,
            page: 1,
            size: 10
          },
          cellValue: '',
          column: ''
        }
      },
      created() {
        this.queryListByPage()
      },
      methods: {
        indexMethod(index) {
          // index = (index + 1) + (this.paging.page - 1) * this.paging.size
          return index + 1
        },
        queryListByPage() {
          this.$nextTick(() => {
            queryList(
              this.searchForm
            ).then(res => {
              if (res.code === 20000) {
                res.data.forEach(item => {
                  item.isRed = false
                })
                this.tableData = res.data
              }
            })
          })
        },
        // 保存
        getPhysicratioAdd() {
          const isAllEqualOne = this.tableData.every(item => {
            if (!(item.dblphysicianzr || item.dblphysicianzz || item.dblphysicianzy)) {
              return true
            } else {
              const r1 = accAdd(item.dblphysicianzr, item.dblphysicianzy)
              const r2 = accAdd(r1, item.dblphysicianzz)
              if (r2 !== 1) {
                return false
              } else {
                return true
              }
            }
          })
          if (!isAllEqualOne) {
            this.$message.error('系数和不为1')
            return false
          }
          physicratioAdd(this.tableData).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.message)
              this.queryListByPage()
            }
          })
        },
        checkRatio(row) {
          if (row.dblphysicianzy !== null) {
            row.isRed = false
            if (!numberFourDec.test(row.dblphysicianzr) || !numberFourDec.test(row.dblphysicianzy) || !numberFourDec.test(row.dblphysicianzz)) {
              row.isRed = true
              this.$message.error('请输入最多四位小数')
              return false
            }
            const r1 = accAdd(row.dblphysicianzr, row.dblphysicianzy)
            const r2 = accAdd(r1, row.dblphysicianzz)
            if (r2 !== 1) {
              this.$message.error('系数和不为1')
              row.isRed = true
            } else {
              row.isRed = false
            }
          }
        },
        tableCellClassName({ row, column, rowIndex, columnIndex }) { // 注意这里是解构
          // 利用单元格的 className 的回调方法,给行列索引赋值
          row.index = rowIndex
          column.index = columnIndex
        },
        cellClick(row, column, cell, event) {
          this.cellValue = row[column.property]// 点击的值
          this.column = column.index
          // console.log(row.index) // 行 1
          // console.log(column.index)// 列 3
        },
        equal() {
          const obj = {
            2: 'dblphysicianzr',
            3: 'dblphysicianzz',
            4: 'dblphysicianzy'
          }
          const colName = obj[this.column]
          this.tableData.forEach(item => {
            item[colName] = this.cellValue
          })
        }
      }
    }
    </script>

    <style scoped>
    .red{color:#ff0000}
    </style>
  • 相关阅读:
    三线程连续打印ABC
    Mybatis知识点总结
    【刷题】LeetCode 292 Nim Game
    Java界面编程-建立一个可以画出图形的简单框架
    第11章 持有对象
    第10章 内部类
    构造器和多态(Chapter8.3)
    对象的创建过程(chapter5.7.3)
    静态数据的初始化(Chapter5.7.2)
    final关键字
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/12917889.html
Copyright © 2011-2022 走看看