方法1:
代码:
<el-table-column
label="知识点"
prop="description"
show-overflow-tooltip>
<template slot-scope="scope">
<router-link v-bind:to="'/index?id='+scope.row.id">
{{scope.row.description}}
</router-link>
</template>
</el-table-column>
如果想控制某一个元素。可以使用事件添加判断
感觉上面的方法不好用。我想了另一个办法:
方法2:
1,在click里面关联一个isClick默认是false,如果点击了。就变成true。
2,在点击每一行之后。要跳转之前。加一个判断。isClick为true就不跳转。
关键代码:
完整代码:
<template>
<div>
<h3>我创建的试卷列表:包含了所有做过和没有做过的试卷MyExam</h3>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%" @cell-click="handle">
<el-table-column
label="序号"
prop="id">
</el-table-column>
<el-table-column
label="试卷名称"
prop="name">
</el-table-column>
<el-table-column
label="试卷描述"
prop="description">
</el-table-column>
<el-table-column
label="试卷标签"
prop="categories">
</el-table-column>
<el-table-column
label="题目数量"
prop="topicCount">
</el-table-column>
<el-table-column
label="总分"
prop="score">
</el-table-column>
<el-table-column
label="考试时长"
prop="time">
</el-table-column>
<el-table-column
label="创建时间"
prop="createTime">
</el-table-column>
<el-table-column
align="right">
<!-- <template slot="header" slot-scope="scope">-->
<template slot="header">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="beginTest(scope.$index, scope.row)">开始考试
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除试卷
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
background
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<script>
import global from "../../Global";
export default {
name: "MyExam",
data() {
return {
tableData: [
{
id: '',//试卷id序号
name: '',//试卷名称
creatorId: '',//创建者id
description: '',//试卷描述
categories: [],//标签
topicCount: 0,//题目数量
score: 0,//总分
time: 0,//考试时长
createTime: '',//创建时间
}
],
isClick: false, //判断按钮是否被点击
search: '',
pageNum: 1,
pageSize: 10,
total: 0,
}
},
methods: {
//点击每一行都可以跳转
handle(row, column, event, cell) {
console.log(row)
console.log(column)
console.log(event)
console.log(cell)
// 跳转到编辑题目页面需要的数据id
console.log("试卷编号是:" + row.id);
console.log("试卷创建者是:" + row.creatorId);
localStorage.setItem("examId", row.id);
localStorage.setItem("examCreatorId", row.creatorId);
if (!this.isClick) {
this.$router.push({path: '/examdetails'});
}
},
beginTest(index, row) {
this.isClick = true;
console.log(index, row);
console.log(row.id);
this.$router.push({
path: '/createtest',
query: {
id: row.id
}
});
},
//删除试卷
handleDelete(index, row) {
console.log(index, row);
console.log(row.id);
console.log(typeof row.id);
this.isClick = true;
console.log("是否被点击了删除按钮试卷?==" + this.isClick);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let formdata = new FormData();
formdata.append('id', row.id);
this.$axios.post("/exam/deleteExam", formdata).then(response => {
console.log("response.data" + response.data);
if (response.data.status === global.responseCode.OK) {
console.log("删除成功!");
//删除成功之后。页面重新获取数据
this.getData();
this.isClick = false;
} else {
console.log("删除失败: " + response.data.msg);
}
}).catch(function (error) {
console.log(error);
});
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.isClick = false;
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//分页
// 每页显示的条数
handleSizeChange: function (size) {
// 改变每页显示的条数
this.pagesize = size;
console.log(this.pagesize);
},
// 显示第几页
handleCurrentChange: function (pageNum) {
// 改变默认的页数
this.pageNum = pageNum;
console.log(this.pageNum); //点击第几页
this.getData();
},
getData() {
this.$axios.get("/exam/listMyExam", {params: {pageNum: this.pageNum}}).then(response => {
// console.log(response.data.result);
if (response.data.result) {
// this.tableData = response.data.result;
var arr = response.data.result.list;
this.tableData = arr.map(item => {
return {
id: item.id,
name: item.name,
creatorId: item.creatorId,
description: item.description,
topicCount: item.topicCount,
score: item.score,
time: item.time,
categories: item.categories,
createTime: item.createTime,
};
});
this.total = response.data.result.total;
// console.log(this.total);
} else {
console.log("获取试卷信息失败: " + response.data.msg);
}
}).catch(function (error) {
console.log(error);
})
},
},
created() {
this.getData();
}
}
</script>
<style scoped>
</style>