1、效果图
2、跳转链接及鼠标滑过显示红色
<el-table-column show-overflow-tooltip prop="publishStatus" label="发布状态" width="100">
<template slot-scope="{row}">
{{row.publishStatus=='1'?'未发布':'已发布'}}
</template>
</el-table-column>
methods:{
//反馈人员详情列表
gridRespond( row ){
this.$router.push(
{
path:'/gridCall/respond',query:{id:row.id}
}
);
},
}<style>
#newGridList.el-table .ahover:hover td:nth-child(9) a {
color: #cc0000;
border-bottom: 1px solid #cc0000;
cursor: pointer
}
</style>
<!-- 这里的td:nth-child(9)是代表给第9列的数据添加鼠标滑过样式-->3、routes.js
let gridCall_index = r => require.ensure([], () => r(require('./components/gridCallList.vue')),'group16');
let gridCall_respond = r => require.ensure([], () => r(require('./components/gridFeedBackChild.vue')),'group16');
let routes = [
{
path: '/gridCall/index',
component: gridCall_index,
name: 'gridCall_index'
},
{
path: '/gridCall/respond',
component: gridCall_respond,
name: 'gridCall_respond'
},
];
export default routes;
4、gridFeedBackChild.vue 标签页
<template>
<div class="standard tabCon">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="已反馈**" name="actualRespond">
<gridActualRespond-list ref="gridActualRespondList"></gridActualRespond-list>
</el-tab-pane>
<el-tab-pane label="应反馈**" name="shouldRespond">
<gridShouldRespond-list ref="gridShouldRespondList"></gridShouldRespond-list>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import gridActualRespondList from "./gridActualRespondList";
import gridShouldRespondList from "./gridShouldRespondList"
export default {
components: {
gridActualRespondList,
gridShouldRespondList
},
data() {
return {
activeName: "actualRespond"
};
},
mounted() {
this.$refs.gridActualRespondList.getGridRespondList();
},
methods: {
handleClick(tab, event) {
if (this.activeName == "actualRespond") {
this.$refs.gridActualRespondList.getGridRespondList();
} else if (this.activeName == "shouldRespond") {
this.$refs.gridShouldRespondList.getGridRespondList();
}
}
}
};
</script>
5、两个列表页
gridActualRespondList.vue实际反馈人
<template>
<div style="height:100%">
<!-- 按钮管理 -->
<div class="operatorArea">
<div class="tableOperator">
<!--<el-button @click="exportBtn"> 导 出 </el-button>-->
</div>
</div>
<!-- 列表框 -->
<div class="tableList">
<el-table :data="teamModelListTable" stripe style="width: 100%"
@selection-change="handleSelectionChange"
:row-class-name="tableClassNameRow"
tooltip-effect="dark"
id="newGridList"
ref="gridActualRespondList">
<el-table-column label="序号" type="index" width="100" align="center">
<template slot-scope="scope">{{
scope.$index + 1 + pageSize * (currentPage - 1)
}}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="feedName" label="反馈人" ></el-table-column>
<el-table-column show-overflow-tooltip prop="gridName" label="网格名称" ></el-table-column>
<el-table-column show-overflow-tooltip prop="finishSituation" label="完成情况"></el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total,sizes, prev, pager, next,jumper"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
indexData: "",//这个是选择行信息
dialogflag: "2", //选择行判断标识
selectList: [], //选择数据
teamModelListTable: [], //列表信息
currentPage: 1, //当前页
total: 20, //总条数
pageSize: 10,
getGridRespondUrl:"/party/onlineExam/feed/getPcFeedBackList",
};
},
created() {
},
mounted() {
this.getGridRespondList();//获取表单信息
},
methods: {
tableClassNameRow(row, rowIndex) {
return "ahover";
},
//列表数据
getGridRespondList() {
let _this = this;
let data = {
//参数
id: _this.$route.query.id,
flag:"1",
pageNo: this.currentPage,
pageSize: this.pageSize
}
this.$http.post(_this.getGridRespondUrl, data).then(res => {
if (res.data.success == true) {
_this.total = res.data.data.total ? res.data.data.total : 0;
console.info("初始列表data", res.data)
this.teamModelListTable = res.data.data.list;
}
});
},
//分页页面数据
handleCurrentChange(val) {
this.currentPage = val;
this.getGridRespondList();
},
handleSizeChange(val) {
this.pageSize = val;
this.getGridRespondList();
},
//选择具体行号
handleSelectionChange(val) {
for (var i = 0; i < val.length; i++) {
this.ids.push(val[i].id);
}
if (val.length > 1) {
this.dialogflag = 1;
} else if (val.length == 0) {
this.dialogflag = 2;
} else {
this.dialogflag = 0;
this.indexData = val[0];
}
this.selectList = val;
},
},
};
</script>
<style>
#newOrgList.el-table .ahover:hover td:nth-child(3) a {
color: #cc0000;
border-bottom: 1px solid #cc0000;
cursor: pointer
}
</style>
gridShouldRespondList.vue 应该反馈人
<template>
<!-- 网格叫应管理 -->
<div style="height:100%">
<!-- 按钮管理 -->
<div class="operatorArea">
<div class="tableOperator">
<!--<el-button @click="exportBtn"> 导 出 </el-button>-->
</div>
</div>
<!-- 列表框 -->
<div class="tableList">
<el-table :data="teamModelListTable" style="width: 100%"
@selection-change="handleSelectionChange"
:row-class-name="tableClassNameRow"
tooltip-effect="dark"
id="newGridList"
ref="gridShouldRespondList">
<el-table-column label="序号" type="index" width="100" align="center">
<template slot-scope="scope">{{
scope.$index + 1 + pageSize * (currentPage - 1)
}}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="feedName" label="反馈人" ></el-table-column>
<el-table-column show-overflow-tooltip prop="gridName" label="网格名称" ></el-table-column>
<el-table-column show-overflow-tooltip prop="finishSituation" label="完成情况"></el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total,sizes, prev, pager, next,jumper"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
indexData: "",//这个是选择行信息
dialogflag: "2", //选择行判断标识
selectList: [], //选择数据
teamModelListTable: [], //列表信息
currentPage: 1, //当前页
total: 20, //总条数
pageSize: 10,
getGridRespondUrl:"/party/onlineExam/feed/getPcFeedBackList",
};
},
created() {
},
mounted() {
this.getGridRespondList();//获取表单信息
},
methods: {
//未反馈颜色区分
tableClassNameRow(row, rowIndex) {
console.log(row)
if (row){
if (row.isFinished == null && row.isReceived == null ){
return 'is-finished-filled';
}else {
return '';
}
}
},
//列表数据
getGridRespondList() {
let _this = this;
let data = {
//参数
id: _this.$route.query.id,
flag:"",
pageNo: this.currentPage,
pageSize: this.pageSize
}
this.$http.post(_this.getGridRespondUrl, data).then(res => {
if (res.data.success == true) {
_this.total = res.data.data.total ? res.data.data.total : 0;
console.info("初始列表data", res.data)
this.teamModelListTable = res.data.data.list;
}
});
},
//分页页面数据
handleCurrentChange(val) {
this.currentPage = val;
this.getGridRespondList();
},
handleSizeChange(val) {
this.pageSize = val;
this.getGridRespondList();
},
//选择具体行号
handleSelectionChange(val) {
for (var i = 0; i < val.length; i++) {
this.ids.push(val[i].id);
}
if (val.length > 1) {
this.dialogflag = 1;
} else if (val.length == 0) {
this.dialogflag = 2;
} else {
this.dialogflag = 0;
this.indexData = val[0];
}
this.selectList = val;
},
},
};
</script>
<style>
.is-finished-filled {
background-color: #07e56c !important; /* 高亮颜色，可以根据需求自定义 */
font-weight: bold; /* 另外一种可能的高亮方式 */
}
</style>
