vue element table
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
<template>
<div class="wraper">
<el-table
@selection-change="selectChange"
ref="singleTable"
:data="tableData"
@cell-click="tabClick"
style="width: 100%"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
highlight-current-row
@current-change="handleCurrentRowChange"
>
<el-table-column
type="index"
label="序号"
fixed
width="50"
:index="indexMethod"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column type="selection" align="center" width="55">
</el-table-column>
<template v-for="(item, idx) in option">
<el-table-column
:prop="item"
:key="idx"
:label="formatter(item)"
min-width="120"
align="center"
sortable
>
<template slot-scope="scope">
<template v-if="item === 'id'">
<el-tag type="primary" disable-transitions>{{
scope.row[item]
}}</el-tag>
</template>
<template v-else-if="item === 'channel'">
<el-input
v-if="scope.row.id === tabClickIndex && item === tabClickLabel"
v-model="scope.row[item]"
maxlength="300"
@blur="inputBlur"
/>
<p class="value" v-else>
{{ scope.row[item] }}
</p>
</template>
<template v-else-if="item === 'status'">
<!-- 0待财务确认,1财务确认,2技术主管确认,3项目完成 -->
<template v-if="scope.row[item] == 0">
<el-tag disable-transitions> 待财务确认 </el-tag>
</template>
<template v-else-if="scope.row[item] == 1">
<el-tag disable-transitions type="info"> 财务确认 </el-tag>
</template>
<template v-else-if="scope.row[item] == 2">
<el-tag disable-transitions type="warning">
技术主管确认
</el-tag>
</template>
<template v-else-if="scope.row[item] == 3">
<el-tag disable-transitions type="success"> 项目完成 </el-tag>
</template>
<template v-else>
<el-tag disable-transitions type="danger"> -- </el-tag>
</template>
</template>
<template v-else-if="item === 'take_time'">
<el-tooltip
class="item"
effect="dark"
:content="scope.row[item]"
placement="top"
>
<el-tag type="success">
{{ scope.row[item] | formatTime }}
</el-tag>
</el-tooltip>
</template>
<template v-else-if="item === 'admin_name'">
<el-tooltip
class="item"
effect="dark"
:content="scope.row[item]"
placement="top"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<el-avatar
icon="el-icon-user-solid"
style="margin-right: 10px"
></el-avatar>
{{ scope.row[item] }}
</div>
</el-tooltip>
</template>
<template v-else>
<!-- <el-input
v-if="scope.row.isSelected"
v-model="scope.row[item]"
@focus="focusEvent(scope.row)"
@blur="blurEvent(scope.row)"
v-focus
></el-input>
<p @click="cellClick(scope.row)" v-else class="value">{{scope.row[item]}}</p> -->
<el-input
v-if="scope.row.id === tabClickIndex && item === tabClickLabel"
v-model="scope.row[item]"
maxlength="300"
@blur="inputBlur"
/>
<p class="value" v-else>
{{ scope.row[item] }}
</p>
</template>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination
style="margin-top: 30px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="dataForm.page"
:page-sizes="pageSizes"
:page-size="dataForm.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<el-backtop target=".wraper"></el-backtop>
</div>
</template>
<script>
export default {
data() {
return {
tabClickIndex: null, // 点击的单元格
tabClickLabel: "", // 当前点击的列名
//主体数组
tableData: [],
loading: true,
option: [], //头
oldValue: null,
pageSizes: [5, 10, 20, 100, 200, 300, 400],
//分页相关
total: 0, //一共多少条
dataForm: {
page: 1, //当前页: ${val}
pagesize: 10, //每页 ${val} 条
},
};
},
directives: {
focus: {
inserted: function (el) {
el.querySelector("input").focus();
},
},
},
created() {
this.getSearchList();
},
mounted() {},
filters: {
formatTime: function (value) {
//date1和date2是2002-12-18格式
var date1Str = value.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
//根据年 . 月 . 日的值创建Date对象
var date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
// var date2Str = date2.split("-");
var date2Obj = new Date();
var t1 = date1Obj.getTime();
var t2 = date2Obj.getTime();
var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
var minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
var days = Math.abs(minusDays); //取绝对值
if (days > 30) {
if (days > 365) {
if (days > 36500) {
return (
Math.floor(days / 36500) +
"世纪" +
Math.floor((days % 36500) / 365) +
"年前"
);
}
return (
Math.floor(days / 365) +
"年" +
Math.floor((days % 365) / 30) +
"月前"
);
}
return Math.floor(days / 30) + "月前";
}
return days + "天前";
},
},
methods: {
tabClick(row, column, event, cell) {
// console.log(row)
// console.log(column)
// console.log(event)
// console.log(cell)
if (column.label) {
// let that=this;
this.tabClickIndex = row.id;
this.tabClickLabel = column.property;
this.oldValue = row[column.property];
// console.log(this.tabClickIndex, this.tabClickLabel);
} else {
this.tabClickIndex = null;
this.tabClickLabel = "";
}
},
//输入完成
inputBlur(row, event, column) {
// console.log(row,event,column);
console.log(row.target.value, this.tabClickIndex, this.tabClickLabel);
if (row.target.value !== this.oldValue) {
// 调用修改名称接口
this.$api
.getEdit({
id: this.tabClickIndex,
paramName: this.tabClickLabel,
value: row.target.value,
})
.then((res) => {
if (res.data.code === 0) {
this.$message({
message: "修改成功",
type: "success",
duration: 1000,
});
}
});
}
this.tabClickIndex = null;
this.tabClickLabel = "";
},
//当选择项发生变化时会触发该事件 element
selectChange(e) {
console.log(e);
},
//得到焦点
focusEvent(row) {
row.oldName = row.name;
},
//失去焦点
blurEvent(row) {
row.isSelected = !row.isSelected;
if (row.name !== row.oldName) {
// 。。。此处代码省略（调用修改名称接口）
this.$message({
message: "修改成功",
type: "success",
duration: 1000,
});
}
},
cellClick(row) {
row.isSelected = !row.isSelected;
},
formatter(item) {
let state = {
name: "工单标题",
id: "ID",
channel: "工单来源(类型)",
admin_name: "销售",
take_time: "接单时间",
status: "状态",
};
if (Object.keys(state).indexOf(item) > -1) {
return state[item];
}
return item;
},
getSearchList() {
this.loading = true;
this.$api.getList(this.dataForm).then((res) => {
console.log(res.data);
if (this.option.length === 0) {
this.option = Object.keys(res.data.data[0]);
}
this.total = Number(res.data.total);
this.tableData = res.data.data.map((item) => {
return { ...item, isSelected: false };
});
this.$nextTick(() => {
setTimeout(() => {
this.loading = false;
}, 500);
});
});
},
handleCurrentRowChange(val) {
// console.log(`${val}行`);
// console.log(val);
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
let oldSize = this.dataForm.pagesize; //之前
this.dataForm.pagesize = val;
if (this.dataForm.page * oldSize <= this.total) {
// this.dataForm.page*oldSize 之前浏览到的最后的位置
if (val >= this.dataForm.page * oldSize) {
this.dataForm.page = 1;
} else {
this.dataForm.page = Math.ceil((this.dataForm.page * oldSize) / val);
}
} else {
// this.dataForm.page=1
this.dataForm.page = Math.ceil(this.total / val); //最后 一页
}
this.getSearchList();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.dataForm.page = val;
this.getSearchList();
},
indexMethod(index) {
return (this.dataForm.page - 1) * this.dataForm.pagesize + index + 1;
},
},
};
</script>
<style scoped>
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wraper {
height: 100vh;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
}
* {
box-sizing: border-box;
}
.value {
min-height: 30px;
min-width: 100px;
background: inherit;
}
p:empty {
border: 1px solid #ccc;
}
</style>
<template> <div class="wraper"> <el-table @selection-change="selectChange" ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" highlight-current-row @current-change="handleCurrentRowChange" > <el-table-column type="index" label="序号" fixed width="50" :index="indexMethod" align="center" show-overflow-tooltip > </el-table-column> <el-table-column type="selection" align="center" width="55"> </el-table-column> <template v-for="(item, idx) in option"> <el-table-column :prop="item" :key="idx" :label="formatter(item)" min-width="120" align="center" sortable > <template slot-scope="scope"> <template v-if="item === 'id'"> <el-tag type="primary" disable-transitions>{{ scope.row[item] }}</el-tag> </template> <template v-else-if="item === 'channel'"> <el-tag type="primary" disable-transitions>{{ scope.row[item] }}</el-tag> </template> <template v-else-if="item === 'status'"> <!-- 0待财务确认,1财务确认,2技术主管确认,3项目完成 --> <template v-if="scope.row[item] == 0"> <el-tag disable-transitions> 待财务确认 </el-tag> </template> <template v-else-if="scope.row[item] == 1"> <el-tag disable-transitions type="info"> 财务确认 </el-tag> </template> <template v-else-if="scope.row[item] == 2"> <el-tag disable-transitions type="warning"> 技术主管确认 </el-tag> </template> <template v-else-if="scope.row[item] == 3"> <el-tag disable-transitions type="success"> 项目完成 </el-tag> </template> <template v-else> <el-tag disable-transitions type="danger"> -- </el-tag> </template> </template> <template v-else-if="item === 'take_time'"> <el-tooltip class="item" effect="dark" :content="scope.row[item]" placement="top" > <el-tag type="success"> {{ scope.row[item] | formatTime }} </el-tag> </el-tooltip> </template> <template v-else-if="item === 'admin_name'"> <el-tooltip class="item" effect="dark" :content="scope.row[item]" placement="top" > <div style=" display: flex; align-items: center; justify-content: center; " > <el-avatar icon="el-icon-user-solid" style="margin-right: 10px" ></el-avatar> {{ scope.row[item] }} </div> </el-tooltip> </template> <template v-else> <el-input v-if="scope.row.isSelected" v-model="scope.row.name" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus ></el-input> <p @click="cellClick(scope.row)" v-else class="value">{{scope.row.name}}</p> </template> </template> </el-table-column> </template> </el-table> <el-pagination style="margin-top: 30px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="dataForm.page" :page-sizes="pageSizes" :page-size="dataForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> <el-backtop target=".wraper"></el-backtop> </div> </template> <script> export default { data() { return { //主体数组 tableData: [], loading: true, option: [], //头 pageSizes: [5, 10, 20, 100, 200, 300, 400], //分页相关 total: 0, //一共多少条 dataForm: { page: 1, //当前页: ${val} pagesize: 10, //每页 ${val} 条 }, }; }, directives: { focus: { inserted: function (el) { el.querySelector("input").focus(); }, }, }, created() { this.getSearchList(); }, mounted() {}, filters: { formatTime: function (value) { //date1和date2是2002-12-18格式 var date1Str = value.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日 //根据年 . 月 . 日的值创建Date对象 var date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]); // var date2Str = date2.split("-"); var date2Obj = new Date(); var t1 = date1Obj.getTime(); var t2 = date2Obj.getTime(); var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数 var minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差 var days = Math.abs(minusDays); //取绝对值 if (days > 30) { if (days > 365) { if (days > 36500) { return ( Math.floor(days / 36500) + "世纪" + Math.floor((days % 36500) / 365) + "年前" ); } return ( Math.floor(days / 365) + "年" + Math.floor((days % 365) / 30) + "月前" ); } return Math.floor(days / 30) + "月前"; } return days + "天前"; }, }, methods: { //当选择项发生变化时会触发该事件 element selectChange(e) { console.log(e); }, //得到焦点 focusEvent(row) { row.oldName = row.name; }, //失去焦点 blurEvent(row) { row.isSelected = !row.isSelected; if (row.name !== row.oldName) { // 。。。此处代码省略（调用修改名称接口） this.$message({ message: "修改成功", type: "success", duration: 1000, }); } }, cellClick(row) { row.isSelected = !row.isSelected; }, formatter(item) { let state = { name: "工单标题", id: "ID", channel: "工单来源(类型)", admin_name: "销售", take_time: "接单时间", status: "状态", }; if (Object.keys(state).indexOf(item) > -1) { return state[item]; } return item; }, getSearchList() { this.loading = true; this.$api.getList(this.dataForm).then((res) => { console.log(res.data); if (this.option.length === 0) { this.option = Object.keys(res.data.data[0]); } this.total = Number(res.data.total); this.tableData = res.data.data.map((item) => { return { ...item, isSelected: false }; }); this.$nextTick(() => { setTimeout(() => { this.loading = false; }, 500); }); }); }, handleCurrentRowChange(val) { // console.log(`${val}行`); console.log(val); }, handleSizeChange(val) { // console.log(`每页 ${val} 条`); let oldSize = this.dataForm.pagesize; //之前 this.dataForm.pagesize = val; if (this.dataForm.page * oldSize <= this.total) { // this.dataForm.page*oldSize 之前浏览到的最后的位置 if (val >= this.dataForm.page * oldSize) { this.dataForm.page = 1; } else { this.dataForm.page = Math.ceil((this.dataForm.page * oldSize) / val); } } else { // this.dataForm.page=1 this.dataForm.page = Math.ceil(this.total / val); //最后 一页 } this.getSearchList(); }, handleCurrentChange(val) { // console.log(`当前页: ${val}`); this.dataForm.page = val; this.getSearchList(); }, indexMethod(index) { return (this.dataForm.page - 1) * this.dataForm.pagesize + index + 1; }, }, }; </script> <style scoped> html, body { overflow: hidden; margin: 0; padding: 0; box-sizing: border-box; } .wraper { height: 100vh; overflow: hidden; overflow-x: hidden; overflow-y: scroll; } * { box-sizing: border-box; } .value { min-height: 30px; min-width: 100px; background: inherit; } p:empty { border: 1px solid #ccc; } </style>
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
