elementui 表格单行删除

一、实现效果

html代码

<el-buttontype="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-buttontype="text"size="small"@click="handleDelete(scope.row.id)">删除</el-button></template></el-table-column><el-table-columnprop="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: "", //记录idlookuplist:[],//查找记录数据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>

elementui 表格单行删除相关推荐

element-ui 表格删除每页最后一条，导致请求的页码还在当前页的问题
element-ui 表格删除每页最后一条,导致请求的页码还在当前页的问题 element-ui 表格删除每页最后一条,导致请求的页码还在当前页的问题 element-ui 表格删除每页最后一条,导致 ...
elementUI中，操作表格单行的dom-锁定和解锁——$nextTick用法-dom根据数据改变而改变
elementUI中,操作表格单行的dom-锁定和解锁--$nextTick用法-dom根据数据改变而改变 1.$nextTick应用场景需要在视图更新之后,基于新的视图进行操作.即:数据改变,do ...
element-ui 表格总计有多行的情况
element-ui 表格总计多行官网文档里面表格的自定义 summary-method 方法显示最后的总计,但是只能返回单行总计: 如果需求需要多行总计,着实不知到怎么办了,上网查了,这个 ...
vue按钮移上去显示提示_vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出...
效果图: 注:@mouseenter="enter(index)" @mouseleave="leave()" 重点下载删除 data() { retu ...
elementui表格在行内增删改查
elementui表格在行内增删改查(此处每次新增或修改条数为1条) 按钮调用方法 <el-button icon="iconfont iconadd" title=&quo ...
element-ui 表格修改后, 表格里面的数据页面不实时更新问题完美解
element-ui 表格修改后表格里面的数据后页面不实时更新问题完美解想要达到的效果:点击"更多"后,"更多"隐藏,删除和补仓显示:(有时间可全部看 ...
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
怎样让elementui表格里面的文字不换行，溢出隐藏，tooltip显示内容
通过设置elementui表格的列属性即可 :show-overflow-tooltip="true" 然后当超出的时候鼠标经过就有提示了
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...

elementui 表格单行删除

elementui 表格单行删除相关推荐

最新文章

热门文章