今天給大家做一個基于element ui的表格效果。我們要實(shí)現(xiàn)的大致藍(lán)圖是，點(diǎn)擊添加按鈕，然后添加表格一行數(shù)據(jù)，這個數(shù)據(jù)可以是后臺給的列表，也可以是自己配置的表單項(xiàng)。給大家上圖先！
QQ截圖20201029113952.png
點(diǎn)擊添加的彈窗效果如下：
QQ截圖20201029113921.png
QQ截圖20201029113931.png
我們布個局先，把表格和彈出窗口給整出來。我們要做兩個表格，一個彈窗，再來個表單，齊活兒了您嘞。
布局結(jié)構(gòu)都寫在代碼注釋里面了，不啰嗦
<template>
<div class="editTable">
<!-- 這是我們的操作按鈕組 start-->
<el-button @click="add">添加</el-button>
<el-button @click="save">保存</el-button>
<!-- 這是我們的操作按鈕組 end-->
<!-- 表格 start -->
<el-table :data="tableData">
<template v-for="(item,index) in header">
<el-table-column v-if="item.prop == 'options'" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">編輯</el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteIt(scope.row)">刪除</el-button>
</el-button-group>
</template>
</el-table-column>
<el-table-column v-else-if="item.prop != 'selection'" :label="item.label" :formatter="item.formatter?item.formatter:null" :prop="item.prop" :width="item.width">
</el-table-column>
</template>
</el-table>
<!-- 表格 start -->
<!-- 添加操作窗口 start-->
<el-dialog title="添加表格數(shù)據(jù)" :visible.sync="tableVisiable" width="760px">
<!-- 這里我們用element的tab頁面來實(shí)現(xiàn)切換 基于name切換-->
<el-tabs v-model="activeName">
<el-tab-pane label="自定義數(shù)據(jù)" name="customer">
<!-- 首先我們來畫個表單，這個大家都熟 -->
<el-form :model="tableForm" label-width="80px">
<el-form-item label="名稱:">
<el-input v-model="tableForm.name"></el-input>
</el-form-item>
<el-form-item label="日期:">
<el-date-picker
v-model="tableForm.date"
align="right"
type="date"
placeholder="選擇日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="類型:">
<el-select v-model="tableForm.type" placeholder="請選擇類型">
<el-option label="動態(tài)表格1" value="0"></el-option>
<el-option label="動態(tài)表格2" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="地址:">
<el-radio-group v-model="tableForm.address">
<el-radio label="1">李村大集</el-radio>
<el-radio label="2">花卉市場</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 這里是你從后臺拉取的/自定義的默認(rèn)數(shù)據(jù) -->
<el-tab-pane label="選用歷史數(shù)據(jù)" name="default">
<el-table :data="checkData" ref="defaultTable" @selection-change="tableSelectionChange">
<template v-for="(item,index) in header">
<el-table-column v-if="item.prop == 'selection'" type="selection" :width="item.width"></el-table-column>
<el-table-column v-else-if="item.prop != 'options'" :label="item.label" :formatter="item.formatter?item.formatter:null" :prop="item.prop" :width="item.width">
</el-table-column>
</template>
</el-table>
</el-tab-pane>
</el-tabs>
<!-- 窗口操作按鈕組 -->
<div slot="footer" class="dialog-footer">
<el-button @click="tableVisiable = false">取 消</el-button>
<el-button type="primary" @click="confirmAdd">確 定</el-button>
</div>
</el-dialog>
<!-- 添加操作窗口 end-->
</div>
</template>
首先我們看表格，表格我們采取表頭自定義，然后循環(huán)出來，這樣我們就可以在dialog中公用一個表頭，有要求的同學(xué)也可以自己封裝成一個表格來用。
export default {
name: 'editTable',
data() {
return {
tableVisiable:false,//彈窗展示狀態(tài)
activeName:'customer',//tab頁切換名稱
//表格表頭定義
header :[
{
prop: "selection",
width: "55"
},
{
prop: "name",
label: "名稱",
},
{
prop: "date",
label: "日期",
width: "180",
formatter: ""
},
{
prop: "type",
label: "類型",
width: "180",
//表格屬性，可以對數(shù)據(jù)進(jìn)行過濾
formatter:item =>{
const statusMap = {
0: '動態(tài)表格1',
1: '動態(tài)表格2'
}
return statusMap[item.type]
}
},
{
prop: "address",
label: "地址",
formatter:item =>{
const statusMap = {
1: '李村大集',
2: '花卉市場'
}
return statusMap[item.address]
}
},
{
prop: "options",
label: "操作",
width: "200",
fixed: "right"
}
],
//我們從后臺拉取的或者自定義的默認(rèn)表格數(shù)據(jù)
checkData:[
{
date:'2017-06-21',
type:'0',
name:'默認(rèn)數(shù)據(jù)1',
address:'1',
options:'',
},
{
date:'2017-05-20',
type:'1',
name:'默認(rèn)數(shù)據(jù)2',
address:'2',
options:'',
}
],
//表格初始數(shù)據(jù)
tableData: [{
date:'2017-03-11',
type:'1',
name:'3',
address:'1',
options:'6',
}],
//表格選擇綁定的數(shù)據(jù)
multipleSelection:[],
//表單綁定數(shù)據(jù)
tableForm:{
date:'2017-03-22',
type:'0',
name:'默認(rèn)數(shù)據(jù)',
address:'1',
options:'',
}
}
}
}
</script>
我們先來看初始表格
QQ截圖20201029120259.png
我們通過header循環(huán)的時候，把操作按鈕這一列區(qū)分出來，判斷他是否是操作列，是的話我們給header數(shù)據(jù)里對應(yīng)加上fixed選項(xiàng)，這個是把操作列固定在末尾，可以不影響視圖變化情況下按鈕縮進(jìn)滾動條里。
然后我們這個基礎(chǔ)表格不需要checkbox，所以判斷去掉checkbox列。再加上表格的過濾方法，因?yàn)槲覀兺ㄟ^表單添加數(shù)據(jù)時，有單選，下拉框，返回值是數(shù)字，拉取后臺數(shù)據(jù)也有可能會給你返回各種數(shù)字需要你做篩選過濾，所以我們要把它展示成中文，添加這個過濾方法就行了。
同理，我們dialog中的表格也是一樣。上面說到，我們可以把表格封裝成一個組件來調(diào)用，小伙伴兒們自行發(fā)揮。
QQ截圖20201029130456.png
表單沒什么好說的，大家都很熟，注意單選/下拉的值是字符串還是數(shù)字類型，統(tǒng)一即可。
我們看在methods里面的處理
methods: {
// 點(diǎn)擊添加彈出配置窗口
add() {
this.tableVisiable = true;//打開彈窗
},
//點(diǎn)擊確認(rèn)給表格配置參數(shù)
confirmAdd(){
//判斷當(dāng)前tab頁面是自定義配置數(shù)據(jù)還是選擇的默認(rèn)數(shù)據(jù)
if(this.activeName == 'customer') {
//選擇默認(rèn)數(shù)據(jù)就直接把綁定的表單數(shù)據(jù)深拷貝之后添加到表格數(shù)據(jù)中即可
let data = Object.assign({},this.tableForm)
this.tableData.push(data);
}else{
//選擇默認(rèn)數(shù)據(jù)添加，利用es6語法...拷貝出選擇的數(shù)據(jù)
let data = [...this.multipleSelection];
//concat：es6語法，鏈接兩個數(shù)組，把選擇的數(shù)據(jù)和原始表格數(shù)據(jù)合并到一起
this.tableData = this.tableData.concat(data);
//在選擇默認(rèn)數(shù)據(jù)，彈窗關(guān)閉后，要清除一下選中狀態(tài)，要不然下次打開彈窗會發(fā)現(xiàn)上次選中的狀態(tài)依然存在
this.$refs.defaultTable.clearSelection();
};
this.tableVisiable = false;//最后關(guān)閉彈窗
},
// 刪除行數(shù)
handleDelete(index) {
this.tableData.splice(index, 1)
},
// 保存提交你添加的內(nèi)容
save() {
//保存數(shù)據(jù)后，處理一下提交 給后臺。
let data = JSON.stringify(this.tableData)
this.$message({
dangerouslyUseHTMLString: true,
message: `<strong>${data}</strong>`
});
},
//彈窗中表格數(shù)據(jù)選擇后賦值給data中定義好的變量，用于添加行
tableSelectionChange(val){
this.multipleSelection = val;
},
//編輯操作
edit(row){
debugger
},
//刪除操作
deleteIt(row){
debugger
}
}
在methods中進(jìn)行的處理注釋都有，這里不詳細(xì)解釋，我們要注意的是目前這些只是基于靜態(tài)數(shù)據(jù)的處理，加上了異步請求之后，我們要自行添加loading等操作，給用戶更好的用戶體驗(yàn)。
希望這篇文章對大家有幫助，有不對或者代碼不友好的地方多多指教。最后給大家呈上效果截圖：
感覺對您有用的麻煩給個小心心，謝謝！
QQ截圖20201029132040.png
