效果:
代码:
<el-table ref="table"
border
:height="tableHeight"
v-loading="loading"
:data="tableDate"
@selection-change="selectItem"
@row-click="openDetails"
style="width: 100%;">
<el-table-column type="selection" width="55" :reserve-selection="false"></el-table-column>
<el-table-column prop="name" :show-overflow-tooltip="true" align="center" label="通道名称"/>
<el-table-column prop="runDevName" :show-overflow-tooltip="true" align="center" label="通道编号"/>
<el-table-column prop="city" :show-overflow-tooltip="true" align="center" label="所属地市"/>
<el-table-column prop="maintOrg" :show-overflow-tooltip="true" align="center" label="运维单位"/>
<el-table-column prop="maintGroup" :show-overflow-tooltip="true" align="center" label="维护班组"/>
<el-table-column prop="startPosition" :show-overflow-tooltip="true" align="center" label="起点位置">
<template scope="scope">
<el-select v-model="scope.row.startPosition" v-show="scope.row.show" placeholder="请选择">
<el-option
v-for="item in dydjbm"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<span v-show="!scope.row.show">{{scope.row.startPosition}}</span>
</template>
</el-table-column>
<el-table-column prop="endPosition" :show-overflow-tooltip="true" align="center" label="终点位置">
<template scope="scope">
<el-select v-model="scope.row.endPosition" v-show="scope.row.show" placeholder="请选择">
<el-option
v-for="item in dydjbm"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<span v-show="!scope.row.show">{{scope.row.endPosition}}</span>
</template>
</el-table-column>
<el-table-column prop="startName" :show-overflow-tooltip="true" align="center" label="起点名称">
<template scope="scope">
<el-input size="small" v-model="scope.row.startName" v-show="scope.row.show" placeholder="请输入内容"></el-input>
<span v-show="!scope.row.show">{{scope.row.startName}}</span>
</template>
</el-table-column>
<el-table-column prop="endName" :show-overflow-tooltip="true" align="center" label="终点名称">
<template scope="scope">
<el-input size="small" v-model="scope.row.endName" v-show="scope.row.show" placeholder="请输入内容"></el-input>
<span v-show="!scope.row.show">{{scope.row.endName}}</span>
</template>
</el-table-column>
<el-table-column prop="operateDate" :show-overflow-tooltip="true" align="center" label="投运日期"/>
<el-table-column label="操作" width="200" :show-overflow-tooltip="true" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="toMap(scope.row)">定位</el-button>
<el-button type="success" size="mini" @click="editLine(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
js代码:
export default {
name: "index",
data() {
return {
dialogVisible: false,
title:'八台里通道详情',
flags: 'new',
selectlist: [], // 选择的table数据
isCheckDate: true,
tableDate:[],
loading: false,
tableHeight: "calc(100vh - 300px)",
dydjbm: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
}
},
created() {
let list=[{
name: '222',
runDevName: '2834832492',
city: '张家口22222222222222222222222222222222',
maintOrg: '运维单位',
maintGroup: 'jsidfs班组',
startPosition: '选项1',
endPosition: '选项1',
startName: '展示干的张',
endName: '展示干sss的张',
operateDate: '投运日期'
},{
name: '3332',
runDevName: '2834832492',
city: '张家口',
maintOrg: '运维单位',
maintGroup: 'jsidfs班组',
startPosition: '选项1',
endPosition: '选项1',
startName: '展示干的张',
endName: '展示干sss的张',
operateDate: '投运日期'
}];
// 遍历table每一个项,并且追加show属性
list.forEach(element => {
element["show"] = false
});
this.tableDate = list;
},
methods:{
toMap(row){
this.$emit('gotoMap',row)
},
// 保存
save(){
this.selectlist[0].show = false;
this.$message({
type: 'success',
message: '数据保存成功!'
});
},
// 删除
deleteData(){
this.$confirm('确定要删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//添加
add(){
this.flags = 'new';
this.title='通道新增';
this.dialogVisible = true;
},
//修改
edit(){
if (this.selectlist.length !==0) {
this.flags = 'new';
this.title='通道修改';
this.dialogVisible = true;
}
},
//编辑
editLine(row){
row.show = true;
},
// 详情
getDetail(){
if (this.selectlist.length !==0) {
this.$store.dispatch('tdgj/setBmArr', this.selectlist[0]);
this.flags = 'info';
this.title='通道详情';
this.dialogVisible = true;
}
},
// 当某一行被点击时会触发该事件 row, column, event
openDetails(row){
this.selectlist= [];
this.selectlist.push(row);
this.$refs.table.clearSelection();
this.$refs.table.toggleRowSelection(row);
},
//当选择项发生变化时会触发该事件
selectItem(rows) {
if (rows.length > 1 || rows.length == 0) {
this.isCheckDate = true;
var newRows = rows.filter((it, index) => {
this.$refs.table.toggleRowSelection(it).show = false;
});
this.selectlist = newRows;
} else {
this.isCheckDate = false;
this.selectlist = rows;
}
}
}
}