列表行删除 接口版

面试试题系统管理

框架是ruoyi-ui

删除的接口请求可以使用post请求 或者 delete请求

post请求要把参数改成data

export function topicDelete (data) {
  return request({
    url: 'api/topic/delete',
        method: 'post',
        data
  })
}

记得在这个js文件中引入

import request from '@/utils/request'

接收并使用 ； 后端接口需要使用传过来的id参数

   deleteList (id) {
        topicDelete({ id: id }).then(res => {
        })
    },

元素列表：

<el-table :data="homeList"
                style="width: 100%"
                :header-cell-style="{
    'background-color': '#ffffff',
        'color':'#C2C2C2'
}">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="questionName"
                         label="试题名称">
        </el-table-column>
        <el-table-column label="试题难度"
                         width="180"
                         prop="difficultyId">
          <template slot-scope="scope">
            <el-button type="success"
                       v-if="scope.row.difficultyId == 1"
                       plain>简单</el-button>
            <el-button type="warning"
                       v-if="scope.row.difficultyId == 2"
                       plain>一般</el-button>
            <el-button type="danger"
                       v-if="scope.row.difficultyId == 3"
                       plain>困难</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="likesNumber"
                         label="点赞数量">
        </el-table-column>
        <el-table-column prop="viewsNumber"
                         label="浏览数量">
        </el-table-column>
        <el-table-column prop="topicStages[0].stageName"
                         label="试题科目">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operateOne">详情</span>
            <span class="operateTow"
                  @click="deleteList(scope.row.id)">删除</span>
　　　　　　　　　　　　<-- 获取本行的ID名 -->

          </template>
        </el-table-column>
      </el-table>