ElementUI给表格加上输入框和单位

Posted 2022-03-01 houzhicongone

关键代码（可以使用判断的语句进行判断添加）：

   <el-input
                v-model="dataList[scope.$index].ruleCon"
                placeholder="输入"
              >
                <template v-if="scope.$index % 2 == 0" slot="append"
                  >%</template
                >

                <template slot="append" v-else>件</template>
              </el-input>

 <div class="table_container">
        <el-table
          ref="multipleTable"
          :data="dataList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >  

        <template slot-scop="scope">
    

        </template>
      
          <el-table-column
            prop="id"
            label="序号"
            show-overflow-tooltip
            width="140"
            disabled
          >
            <template slot-scope="scope">
              <span> scope.row.id || "--" </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="ruleDes"
            label="规则描述"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <span> scope.row.ruleDes || "--"  </span>
            </template>
          </el-table-column>

          <el-table-column width="160">
            <template slot="header" slot-scope="scope">
              <span>规则条件</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="dataList[scope.$index].ruleCon"
                placeholder="输入"
              >
                <template v-if="scope.$index % 2 == 0" slot="append"
                  >%</template
                >

                <template slot="append" v-else>件</template>
              </el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="isValid"
            label="是否有效"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="dataList[scope.$index].isValid"
                on-text="有效"
                off-text="无效"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="perId">
            <template slot="header" slot-scope="scope">
              <span>外包商/人员ID</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="dataList[scope.$index].perId"
                @change="setFixedTel(scope.row)"
                placeholder="请输入外包商,以英文逗号分隔;例如:（user1,user2）"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>