el-table加上el-checkbox实现行内互斥

408 阅读1分钟

行内互斥


<el-table
          :data="listData"
          :span-method="objectSpanMethod"
          :cell-style="{'border-right': '1px solid #eee','border-bottom': '1px solid #eee'}"
          :row-style="{'border-left': '1px solid #eee'}"
          :header-cell-style="{'border-right': '1px solid #eee','background-color': '#f4f7f9!important', 'color': 'rgba(0, 0, 0, 0.65)', 'border-bottom': '0px'}"
          stripe
          style="width: 100%"
          >
          <el-table-column  prop="name"  label="评价内容" align="center"  > 
            <el-table-column  prop="normLevelOneName"  label="一级指标"  width="300"> </el-table-column>
          <el-table-column  prop="normLevelTwoName"  label="二级指标"  width="400"> </el-table-column>
          </el-table-column>

          <el-table-column prop="normName" label="非常满意" width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected" @change="handleCheckboxChange(scope.row, 'column1Selected')"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="coe" label="满意" width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected1" @change="handleCheckboxChange(scope.row, 'column1Selected1')"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="normItemName" label="一般" width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected2" @change="handleCheckboxChange(scope.row, 'column1Selected2')"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column  prop="normItemName"  label="不满意"  width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected3" @change="handleCheckboxChange(scope.row, 'column1Selected3')"></el-checkbox>
            </template> 
          </el-table-column>
          <el-table-column  prop="normItem"  label="非常不满意"  width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected4"   @change="handleCheckboxChange(scope.row, 'column1Selected4')"></el-checkbox>
            </template> 
          </el-table-column>
          <el-table-column  prop="normItemName"  label="不了解"  width="200">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.column1Selected5"  @change="handleCheckboxChange(scope.row, 'column1Selected5')"></el-checkbox>
            </template> 
          </el-table-column>

方法

    handleCheckboxChange(row, selectedField) {
  //先取消其他checkbox的选择
      for (const field in row) {
        if (row.hasOwnProperty(field) && field !== selectedField && field.startsWith('column1Selected')) {
          row[field] = false;
        }
      }
    },
  • row.hasOwnProperty(field):确保 field 是 row 对象自身的属性,而不是继承自原型链的属性。
  • field !== selectedField:确保当前属性不是被选中的那个checkbox对应的属性。这是为了避免将当前选中的checkbox状态设置为 false。
  • field.startsWith('column1Selected'):确保属性 名以 'column1Selected' 开头。这是为了过滤出与checkbox相关的属性。
  • row[field] = false;:如果上述条件都满足,就将当前属性的值设置为 false,即取消选择对应的checkbox。