el-table 单元格插入按钮组el-radio-group

这篇博客介绍了如何在Vue.js的el-table组件中实现单元格内嵌入按钮组和el-radio-group,通过示例HTML代码和data return的展示,详细解析了这一功能的实现步骤。
摘要由CSDN通过智能技术生成

html代码

   <el-table
              :data="ruleForm.tabData"
              border
              style="width:100%;overflow-y:auto;"
              :row-style="{ height:'35px'}"
            >
              <el-table-column prop="num" label="序号">
                <template slot-scope="scope">
                  <span v-text="scope.$index + 1"></span>
                </template>
              </el-table-column>
              <el-table-column prop="fileName" label="文件名"></el-table-column>
              <el-table-column prop="radio" label="检测项目" width="200">
                <template slot
el-table单元格嵌入el-input可以通过使用插槽来实现。在el-table-column使用scoped slot,将单元格的数据传递给插槽,然后在插槽使用el-input来编辑数据。具体步骤如下: 1. 在el-table-column使用scoped slot,将单元格的数据传递给插槽。 2. 在插槽使用el-input来编辑数据。 3. 在el-input使用v-model绑定数据,使得编辑后的数据能够同步到数据源。 举个例子,假设我们要在el-table的某一列嵌入el-input来编辑数据,可以按照以下步骤进行操作: 1. 在el-table-column使用scoped slot,将单元格的数据传递给插槽。 ``` <el-table-column label="姓名"> <template slot-scope="scope"> <span>{{ scope.row.name }}</span> <template v-if="scope.row.editable"> <el-input v-model="scope.row.name"></el-input> </template> </template> </el-table-column> ``` 2. 在插槽使用el-input来编辑数据。 ``` <el-table-column label="姓名"> <template slot-scope="scope"> <span>{{ scope.row.name }}</span> <template v-if="scope.row.editable"> <el-input v-model="scope.row.name"></el-input> </template> </template> </el-table-column> ``` 3. 在el-input使用v-model绑定数据,使得编辑后的数据能够同步到数据源。 ``` <el-table-column label="姓名"> <template slot-scope="scope"> <span>{{ scope.row.name }}</span> <template v-if="scope.row.editable"> <el-input v-model="scope.row.name"></el-input> </template> </template> </el-table-column> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值