VUE表格单元格 信息操作请求

前端样式

在前端设计过程中，遇到需要删除表内某行数据，而改行数据在数据库中存储，需要通过每行的条件在数据库中进行筛选。本次采用Vue+Element UI完成该操作

名字	班级	操作
张三	1022	删除

前端代码

					<el-table
                    :data="tableData"
                    size="large"
                    style="width: 100%"
                    height="500"
                    >
                        <el-table-column
                            prop="Name_data"
                            label="名字"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="Class_data"
                            label="班级"
                            width="180">
                            <template slot-scope="scope5_1">
                                <div  class="txt">{{scope5_1.row.Class_data}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center">
                            <template slot-scope="scope">
                                <el-button
                                @click="delete_data(scope.row)"
                                type="text"
                                size="small"
                                align="left">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

数据部分

<script>
export default {
  data() {
    return {
      tableData: [{
	        Name_data ："张三",
            Class_data：1022,
      }],
    };
  },
  methods:{
      delete_data(row) {
      /** * 请求判断 */
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post( '请求地址', null, {
          params:
              { 
                name: row.Name_data ,
                class_num: row.Class_data,
              },
        }).then(({ data: response }) => {
          if (成功标志) {
            //刷新数据
            this.$message.success('删除成功!')
            
          } else {
            this.$message.info('删除失败!')
          }
        }).catch((err) => {

        });

      }).catch(() => {

        this.$message.info('已取消删除');
      });

    },
  },
 }

至此完成一次前端请求过程