vue弹出框

最新推荐文章于 2024-08-29 10:04:34 发布

榴莲豆包

最新推荐文章于 2024-08-29 10:04:34 发布

阅读量375

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_41992943/article/details/128383630

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

这段代码展示了如何在Vue.js应用中使用el-dialog和el-table组件来创建一个可编辑的商品列表。用户可以在表格内直接修改商品名称和价格，并通过点击'选择'按钮触发sendgoods方法，该方法接收商品ID作为参数。对话框的显示状态由goodsshow变量控制。

摘要由CSDN通过智能技术生成

<el-dialog :visible.sync="goodsshow">
      <el-table :data="goodsList" style=" 100%" >
            <el-table-column prop="fildna" label="商品名称" style="6vw;" >
              <template scope="scope">
                  <el-input size="mini" v-model="scope.row.name"  ></el-input>
              </template>
              </el-table-column>
            <el-table-column prop="remark" label="商品价格">
              <template scope="scope">
                  <el-input size="mini" v-model="scope.row.Price"  ></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right"  label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="sendgoods(scope.row.id)" size="small"> 选择 </el-button>
              </template>
            </el-table-column>
      </el-table>
    </el-dialog>

 data() {
    return {
        goodsList:[],
        goodsshow:false
    };

methods: {
      //显示弹出框
      goodslistfun(){
        this.goodsshow = true
      },
}