vue动态渲染表格

项目场景：拼团的后台项目，项目中需要设置参团的sku，也就是所开的这个团是几人的团，开团的人数不同，价格也就不同。所以需要动态渲染个表格的列，如下图中2人团价格以及3人团价格表头需求描述：当后台管理员选择开团的类型后，所关联的参团商品设置sku时，会动态渲染参团类型所对应的价格。如下图sku设置。![](https://img-blog.csdnimg.cn/20210325200323711.p

爱拉比

2905人浏览 · 2021-03-25 20:22:33

爱拉比 · 2021-03-25 20:22:33 发布

项目场景：

拼团的后台项目，项目中需要设置参团的sku，也就是所开的这个团是几人的团，开团的人数不同，价格也就不同。所以需要动态渲染个表格的列，如下图中2人团价格以及3人团价格表头

需求描述：

当后台管理员选择开团的类型后，所关联的参团商品设置sku时，会动态渲染参团类型所对应的价格。如下图sku设置。

代码：

<el-table
        ref="multipleTable"
        :data="skuTableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column prop="id" label="SKU编号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="sku_attr_text"
          label="规格"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="address" label="价格" align="center">
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center">
        </el-table-column>

		//动态渲染的表格列
        <el-table-column
          :label="item.val"
          v-for="(item, index) in tableHead"
          :key="index"
        >
          <template scope="scope">
            <el-input
              size="small"
              v-model="scope.row[item.item]"
              placeholder="0"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>




tableHead:[
	{ val: "2人团价格", item: "target1" },
	{ val: "3人团价格", item: "target2" },
]  是个数组


skuTableData:[
	{target1:1},
	{target2:2}
]
这个是表格的行数据 主要就是数据对应上

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^