platformFront/src/components/knowledgeExtra/AddAssess/ScoreResultsTable.vue

<template>
  <div class="ScoreResults">
    <el-table
      :data="list"
      header-row-class-name="header_row_class_name"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column prop="orderNo" width="70px" label="">
        <template slot-scope="scope">
          <div class="btn_box">
            <div class="btn_div">
              <img
                @click="$emit('CHANEG_SCORE_RESULT', 1, scope.$index)"
                src="@/images/add-new-rule-sub.png"
                alt=""
              />
            </div>
            <div class="btn_div" v-if="list.length > 1">
              <img
                @click="$emit('CHANEG_SCORE_RESULT', 0, scope.$index)"
                src="@/images/add-new-rule-del.png"
                alt=""
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="得分范围">
        <template slot-scope="scope">
          <!-- <div>{{ scope.row.content.max }},{{ scope.row.content.min }}</div> -->
          <div class="range_box">
            <div class="range_child">
              <el-form-item label="大于:" label-width="50px">
                <el-input
                  type="text"
                  v-model="scope.row.content.max"
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <div class="range_child">
              <el-form-item label="小于:" label-width="50px">
                <el-input
                  type="text"
                  v-model="scope.row.content.min"
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="结果">
        <template slot="header">
          <div class="custom_table_header">结果</div>
        </template>
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              type="text"
              v-model="scope.row.result"
              clearable
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="pushInfo" label="建议">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              type="text"
              v-model="scope.row.pushInfo"
              clearable
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      default: []
    }
  }
};
</script>

<style lang="less" scoped>
.ScoreResults {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  /deep/.el-table th,
  .el-table tr {
    height: 50px;
    background: #e3eaf4;
  }
  /deep/.el-table th {
    padding: 0;
  }
  .btn_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .btn_div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .range_box {
    display: flex;
    .range_child {
      flex: 1;
      &:nth-child(1) {
        margin-right: 20px;
      }
    }
  }
  /deep/.el-input--mini .el-input__inner {
    width: 100%;
  }
}
</style>