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

关键代码(可以使用判断的语句进行判断添加):

   <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>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有时间指导毕业设计

觉得写的好的话可以给我打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值