2020年，又是一輪庚子年，春節因為肺炎也不能愉快的過下去了，在家可乾的事不多，閒著無聊，就把以前寫的一個可編輯表格元件整理了一下，其實思路簡單，就是span標籤和input標籤的切換，但是在有select標籤情況下，select下拉的name和value切換可能會需要額外處理。
效果如下：
功能實現了，程式碼如下：
<template>
<div class="qn-edit-table">
<el-row>
<el-col :span="24" class="edit-table-box">
<el-table size="mini" :data="tableData.tBody"
border style="width: 100%" highlight-current-row>
<template v-for="(colum,i) in tableData.tHead">
<el-table-column
:prop="colum.id"
:label="colum.name"
:width="colum.width"
:key="i"
v-if="colum.show"
:column-key='colum.id'
>
<template slot-scope="scope" >
<span v-if="scope.row.isSet">
<template v-if="colum.type == 'input'">
<el-input
v-model="tableData.sel[colum.id]">
</el-input>
</template>
<template v-if="colum.type == 'select'">
<el-select
v-model="tableData.sel['select_' + colum.id]"
@change='selectChange($event,colum,scope.$index)'
>
<el-option
v-for="item in colum.options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</span>
<span v-else>
<span>{{scope.row[colum.id]}}</span>
</span>
</template>
</el-table-column>
</template>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span class="el-tag el-tag--info el-tag--mini"
style="cursor: pointer;"
@click="rowChange(scope.row,scope.$index,false)"
>{{scope.row.isSet?'儲存':"修改"}}</span>
<span v-if="!scope.row.isSet&&tableData.tBody.length>1"
class="el-tag el-tag--danger el-tag--mini"
style="cursor: pointer;"
@click="del(scope.row,scope.$index,true)"
>刪除</span>
<span v-else-if="tableData.tBody.length>1"
class="el-tag el-tag--mini"
style="cursor: pointer;"
@click="rowChange(scope.row,scope.$index,true)"
>取消</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24" class="edit-table-add" v-if="tableData.addShow">
<div class="el-table-add-row" @click="addRow()">
<span>+ 新增行</span>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name:'qnEditTable',
props:{
tableData:{
type:Object,
default(){
return {}
}
},
type:{
type:String,
default:'new',
},
addMore:{ //是否能無限新增
type:Boolean,
default:false,
},
},
data(){
return{}
},
methods: {
//新增行
addRow() {
for (let i of this.tableData.tBody) {
if (i.isSet) return this.$message.warning("請先儲存當前編輯項");
}
let j = JSON.parse(JSON.stringify(this.tableData.row));
this.tableData.tBody.push(j);
this.tableData.sel = JSON.parse(JSON.stringify(j));
},
//修改
rowChange(row, index, cancelFlag ) {
for (let i = 0; i < this.tableData.tBody.length; i++) {
let item = this.tableData.tBody[i];
if (item.isSet && index !== i)return this.$message.warning("請先儲存當前編輯項");
}
// 取消標識
if(cancelFlag){
this.tableData.tBody[index].isSet = !row.isSet;
return;
}
if(!row.isSet){ //修改
console.log('修改')
this.tableData.sel = JSON.parse(JSON.stringify(row));
this.tableData.tBody[index].isSet = true;
}else{ //儲存
this.tableData.tBody.splice(index,1,this.tableData.sel);
this.tableData.tBody[index].isSet = false;
}
},
//刪除//
del(row,index){
this.tableData.tBody.splice(index,1);
},
selectChange(value,colum,index){
let option_length = colum.options.length;
for (let i = 0; i < option_length; i++) {
if (value === colum.options[i].value) {
console.log(i,colum.options[i]);
this.tableData.sel[colum.id] = colum.options[i].label;
this.tableData.sel['select_' + colum.id] = value;
break;
}
}
}
},
watch:{
tableData:{
handler(){},
deep:true,
},
'tableData.tHead':{
handler(){},
deep:true,
},
'tableData.tBody':{
handler(){},
deep:true,
},
}}
</script>
<style lang="less">
.qn-edit-table{
width: 100%;
.edit-table-box{
.el-table--group::after, .el-table--border::after, .el-table::before{
background: none;
}
.el-table{
width: 100%;
background: none;
color:#000;
border:none;
th{
color:#000;
}
tr{
background: none;
}
td{
border:none;
background: none;
}
.el-table--enable-row-hover .el-table__body tr:hover > td{
background: none;
}
th.is-leaf, .el-table td {
border:none;
}
.el-table--enable-row-hover .el-table__body tr:hover > td{
background: none;
}
.el-table-body{
th{
background: none;
background:rgba(11,44,100,1);
}
tr{
background: none;
td{
border:none;
background: none;
}
.current-row{
td{
background: none;
}
}
}
tr:hover{
background: none;
td{
background: none;
}
}
}
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: none;
}
}
.edit-table-add{
color: #000;
text-align: center;
height: 20px;
cursor: pointer;
margin-top: 10px;
}
}
</style>複製程式碼元件使用：
需要注意的是傳遞的資料格式：select的資料要求label和value都要傳的，以及select下拉框的下拉選單，放在表頭的tBody結構中。
<template>
<div class="table-demo">
<editTabe :tableData="tableData"></editTabe>
</div>
</template>
<script>
import editTabe from './editTable.vue'
export default {
name:'tableDemo',
components:{
editTabe,
},
data(){
return {
tableData:{
sel: null,//選中行
row:{"user": "", "pwd": "", "degree": "", "select_degree": "", "info": "", "isSet": true, "role": "",select_role: "" }, //新增行資料
tHead: [ { id: "user", name: "登入使用者",show:true, type:'input',placeholder: "登入使用者", },
{ id: "pwd", name: "登入密碼",show:true, type:'input',placeholder: "登入密碼", },
{ id: "degree", name: "學歷",show:true, type:'select',placeholder: "學歷", options:[{label:'本科',value:'1'},{label:'大專',value:'2'},{label:'高中',value:'3'},] },
{ id: "select_degree", name: "學歷",show:false, type:'select',placeholder: "學歷",},
{ id: "info", name: "其他資訊",show:true,type:'input',placeholder: "其他資訊", },
{ id: "role", name: "角色",show:true,type:'select',placeholder: "角色",options:[{label:'職員',value:'1'},{label:'經理',value:'2'}] },
{ id: "select_role", name: "角色",show:false,type:'select',placeholder: "角色",},
],
tBody: [
{user:'登入使用者0',pwd:'登入密碼0',degree:'本科',select_degree:'1',info:'其他資訊0', isSet:false,role:'經理',select_role:'2'},
{user:'登入使用者1',pwd:'登入密碼1',degree:'大專',select_degree:'2',info:'其他資訊1',isSet:false,role:'經理',select_role:'2'},
{user:'登入使用者2',pwd:'登入密碼2',degree:'本科',select_degree:'1',info:'其他資訊2',isSet:false,role:'經理',select_role:'2'},
],
addShow:true,
}
}
},
methods:{
}
}
</script>
<style lang="less" scoped>
.table-demo{}
</style>複製程式碼我這邊demo處理的是本地資料，如果需要和後臺互動，大家根據自己的需求修改一下相關位置的程式碼就可以了。
-------------------------------------------------------------------------------------------------
git地址：https://github.com/aicai0/test_components.git
如有問題，歡迎探討，如果滿意，請手動點贊，謝謝！?
及時獲取更多姿勢，請您關注！！！