elementui 表格单行删除

一、实现效果

 

 

  html代码

<el-button
        type="primary"
        icon="el-icon-close"
        size="mini"
        style="margin: 10px 10px 10px 0"
        @click="alldelete"
        :disabled="multipleSelection.length === 0"
        >批量删除</el-button
      >
<el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
        ref="multipleTable"
        size="mini"
        border
        :row-style="tableRowStyle"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column label="操作" width="130" >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          :show-overflow-tooltip="true"
          width='440px'
        >
          <template slot-scope="scope">
            <a :href="scope.row.linkurl" target="_blank">{{
              scope.row.title
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="emorate" label="情感" width='100px'>
          <template slot-scope="scope">
            {{
              scope.row.emorate == "0"
                ? "中性"
                : scope.row.emorate == "1"
                ? "正面"
                : "负面"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="companyname" label="相关主体" :show-overflow-tooltip="true"> 
          <template slot-scope="scope">
              <!-- {{scope.row.companyname}} -->
              <el-button type="text" @click="names(scope.row.companyname)">{{scope.row.companyname}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="publishtime" label="发布时间"> </el-table-column>
        <el-table-column prop="data_source" label="来源"> </el-table-column>
      </el-table>

js代码

<script>
import qs from "qs";
import { newsList, deletelist } from "../../api/News/news";
export default {
  name: "News",
  data() {
    return {
      total: 0, //总数量
      currentPage: 1, //默认显示第一页
      pageSize: 20,
      pages: 1,
      row: {},
      Lookupid:'',
      tableData: [], //表格数据
      // multipleTable: [],
      recordId: "", //记录id
      lookuplist:[],//查找记录数据
      multipleSelection: [], //选中行数据
      formInline: {
        source_flag: "",
        title: "",
        op_flag: "",
        emorate: "",
        company_flag:"",
        start: null,
        end: null,
        companyname:"",
        page: 1,
        pagesize: 20,
      },
      loading: true,
      pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }, //限制时间
    };
  },
  created() {
    this.getNews();
    // this.findloaction()
  },
  methods: {
    //获取数据
    getNews() {
      // console.log(this.formInline);
      newsList(this.formInline).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      });
    },
    //获取选中行信息
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = [];
      for (let selectedItem of val) {
        this.multipleSelection.push(selectedItem.id);
      }
      // console.log(this.multipleSelection);
    },
    //单行删除 
    async handleDelete(id) {
      // console.log("id:", id);
      let params = {
        id_list: id,
      };
      // console.log(params);
      const confirmR = await this.$confirm(
        "此操作将删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      ).catch((err) => err);
      if (confirmR == "confirm") {
        // 进行删除
        deletelist(qs.parse(params)).then((res) => {
          // console.log("res:", res);
          if (res.message !== "ok") {
            return this.$message.error("删除失败");
          }
          this.$message.success("删除成功");
          this.formInline={
            source_flag: this.formInline.source_flag,
              page: this.currentPage,
              page_size: this.pageSize,
              title: this.formInline.title,
              op_flag: this.formInline.op_flag,
              emorate: this.formInline.emorate,
              start: this.formInline.start,
              end: this.formInline.end,
              companyname:this.formInline.companyname,
              company_flag:this.formInline.company_flag,
          }
          // console.log(this.currentPage);
          this.loading = true;
          this.getNews();
        });
      } else {
        return this.$message.info("当前操作已取消");
      }
    },
    //批量删除
    async alldelete() {
      // console.log(this.multipleSelection);
      // console.log("id:", id);
      let params = {
        id_list: this.multipleSelection,
      };
      // console.log(params);
      const confirmR = await this.$confirm(
        "此操作将删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      ).catch((err) => err);
      if (confirmR == "confirm") {
        // 进行删除
        deletelist(qs.parse(params)).then((res) => {
          // console.log("res:", res);
          if (res.message !== "ok") {
            return this.$message.error("删除失败");
          }
          this.$message.success("删除成功");
          this.formInline={
            source_flag: this.formInline.source_flag,
              page: this.currentPage,
              page_size: this.pageSize,
              title: this.formInline.title,
              op_flag: this.formInline.op_flag,
              emorate: this.formInline.emorate,
              start: this.formInline.start,
              end: this.formInline.end,
              companyname:this.formInline.companyname,
              company_flag:this.formInline.company_flag,
          }
          this.loading = true;
          this.getNews();
        });
      } else {
        return this.$message.info("当前操作已取消");
      }
    },
}
</script>