呀呼!呀呼! 2022-05-09 21:29 采纳率: 77.3%
浏览 282
已结题

我怎么通过点击这个删除按钮就可以获取到这个按钮所在行对应品牌的数据库上的自增ID(PS:不是行的序号,因为行的序号可能和数据库上面自增的id不一样)

问题遇到的现象:我怎么通过点击这个删除按钮就可以获取到这个按钮所在行对应品牌的数据库上的自增ID
(PS1:不是行的序号,因为行的序号可能和数据库上面自增的id不一样)
(PS2:由于数据是从Vue里面的data获取的,所以直接通过get这个按钮的id来获取这个按钮对象再.value是报错的,因为这个按钮没有绑定value值,即使我要给他绑定一个value,我也不知怎么写这个value值,因为这个tableData.id里面是有全部的id的)
(PS3:因为这个HTML是从Element里面缝合来的,所以之前学得一些东西我也不知道怎么用)
发生背景: itheima最后面的综合案例之删除单个品牌功能

问题相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element-Brand</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>


<div id="app">
<!--    搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
    <el-form-item label="当前状态">
        <el-select v-model="brand.status" placeholder="当前状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
        </el-select>
    </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
<!--    新增和批量删除两个按钮-->
    <el-row>
        <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
        <el-button type="danger" plain>批量删除</el-button>
    </el-row>
<!--    为添加按钮绑定一个对话框    -->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
<!--        对话框里面的表单-->
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="订单量">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="description">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-switch active-value="1" inactive-value="0" v-model="brand.status"></el-switch>
            </el-form-item>

            <el-form-item>`
                <el-button type="primary" @click="addBrandOnSubmit">提交</el-button>
                <el-button  @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--    table-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    label="订单量"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="当前状态"
                    align="center"
                    translate="translateStatus">
            </el-table-column>
            <el-table-column id="brandIds" value="tableData"
                    prop="id"
                    label="数据库品牌的id"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <el-row>
                <el-button id="revise"  type="primary">修改</el-button>
                <el-button type="danger" @click="deleteBrandById">删除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>
<!--    分页栏-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
         mounted(){
             var _this=this;
             axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
                 /*tableData是vue Data里面的一个属性,如果这里直接this,那么这个this.是指axios里面的变量
                  *而不是vue的Data里面的tableData,所以要提升this的作用域
                  *   把var _this=this;写在axios的外面而且在Vue里面就可以在axios里面用_this指代外面Vue的东西
                  */
                      _this.tableData =resp.data;
               //         console.log(_this.tableData);//有数据
              //   for (var i=0;i<_this.tableData.length;i++){
                //     console.log(_this.tableData[i].id);//有数据
                 //}
                 //       console.log(_this.tableData.id);//undefined
         })
             axios.get("http://localhost:8080/ElementDemo/SelectTotalCountServlet").then(function (resp) {
                 _this.totalCount = resp.data;
             })
         },
        methods:{
            //添加成功的弹窗函数
            successAlert() {
                this.$message({
                    showClose: true,
                    message: '恭喜你,添加品牌成功',
                    type: 'success'
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //复选框选中之后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //搜索表单提交
            onSubmit() {
                console.log('submit!');
            },
            addBrandOnSubmit() {
                var _this=this;
                    axios({                    //把数据发送到后端
                        method:"post",
                        url:"http://localhost:8080/ElementDemo/addBrandServlet",                //这个url写无敌完整路径包括协议那种
                        data:_this.brand
                    }).then(function (resq){            //对后端返回的resp进行处理
                        if(resq.data!==0){
                            console.log(resq.data);
                            _this.dialogVisible=false
                            _this.selectAllBrand();
                            _this.successAlert();
                        }
                    })
            },
            selectAllBrand(){
                var _this=this;
                axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
                    _this.tableData =resp.data;
                })
            },
            deleteBrandById(){
                var _this=this;
                console.log("brandIds="+document.getElementById("brandIds"));
                // for (var i=0;i<_this.tableData.length;i++){
                //     console.log("tableData.id="+_this.tableData[i].id);
                // }
                // console.log(document.getElementById("revise").value);
                axios({                    //把数据发送到后端
                    method:"post",
                    url:"http://localhost:8080/ElementDemo/DeleteABrandServlet",
                    data:_this.tableData.id
                }).then(function (resq){            //对后端返回的resp进行处理
                    console.log(resq.data);
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            translateStatus(val){
                if (val.status===1){

                }else{

                }
            }
        },
        data() {
            return {
                //搜索表单数据和新增品牌数据
                brand: {
                    status: '',
                    companyName: '',
                    brandName:'',
                    ordered: '',
                    description: '',
                    id:''
                },
                tableData: [{
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:'',
                    id:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:'',
                    id:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:'',
                    id:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:'',
                    id:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status: '',
                    id: ''
                }],
                //选中的复选框提取出来的数据集合模型
                multipleSelection: [],
                //对话框是否展示的标记,初始为false为不展示,点击新增按键,该模型同步更改为true展示
                dialogVisible: false,
                //当前页码数据
                currentPage: 1,
                totalCount:1
            }
        }
    })
</script>

我的解答思路和尝试过的方法 :
代码里面注释掉的一些东西是我值过的尝试,结果都是无功而返的

我想要达到的结果
我怎么通过点击这个删除按钮就可以获取到这个按钮所在行对应品牌的数据库上的自增ID
(PS1:不是行的序号,因为行的序号可能和数据库上面自增的id不一样)

  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-09 22:14
    关注

    这里用到了插槽

    
    <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-row>
              <el-button id="revise" type="primary">修改</el-button>
              <el-button type="danger" @click="deleteBrandById(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月18日
  • 已采纳回答 5月10日
  • 创建了问题 5月9日

悬赏问题

  • ¥20 关于php录入完成后,批量更新数据库
  • ¥15 请教往复密封润滑问题
  • ¥15 cocos creator发布ios包
  • ¥15 comsol压电材料数据
  • ¥35 用python实现除法算法中goldschmidt算法
  • ¥15 汇编代码转换成C代码
  • ¥15 除法算法中的归一化具体是怎么变的?
  • ¥20 集成电路的逻辑电路和晶体管简化图
  • ¥15 下载windows builder后的问题
  • ¥15 端口连接数为什么会有限制