場景

要實現在ElementUI的表格中每一列展示的不是數據而是控件。效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

普通表格官方示例代碼

<template><el-table:data="tableData"stripestyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table> </template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]}}} </script>要實現每列中使用的是控件的話可以使用template來實現<el-table-column label="指定天數" align="center" prop="ts" width="150"><template slot-scope="scope"><el-selectclearable@change="changezdts(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].ts"><el-optionv-for="dict in zdtsOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template></el-table-column>

這里是在此列使用下拉框控件作為模板

這里要添加slot-scope屬性。添加這個屬性可以在后面獲取到某一行。

完整示例代碼

??????? <el-tablev-loading="loading":data="bcglXiangXiList":row-class-name="rowClassName"@selection-change="handleDetailSelectionChange"ref="tb"><el-table-column type="selection" width="30" align="center" /><el-table-column label="序號" align="center" prop="xh"? width="50"></el-table-column><el-table-column label="開始時間/最早時間-結束時間/最晚時間" width="250" prop="sjfw"><template slot-scope="scope"><el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="開始時間"end-placeholder="結束時間"range-separator="至"clearable@change="changesjfw(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].sjfw"></el-time-picker></template></el-table-column><el-table-column label="指定天數" align="center" prop="ts" width="150"><template slot-scope="scope"><el-selectclearable@change="changezdts(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].ts"><el-optionv-for="dict in zdtsOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template></el-table-column><el-table-column label="打卡地點" align="center" prop="dkdd" width="150"><template slot-scope="scope"><el-selectclearable@change="changedkdd(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].dkdd"><el-optionv-for="dict in dkddOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template></el-table-column><el-table-column label="最小井下累計時間-最大井下累計時間" width="250" prop="jxsjfw"><template slot-scope="scope"><el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="開始時間"end-placeholder="結束時間"range-separator="至"clearable@change="changejxsjfw(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"></el-time-picker></template></el-table-column></el-table>

在使用可控件之后再使用v-model進行雙向數據綁定時就是動態數據綁定了。

這里首先設置el-table的數據源為 一個對象數組

????????? :data="bcglXiangXiList"

然后添加一個單選框

<el-table-column type="selection" width="30" align="center" />

通過@selection-change="handleDetailSelectionChange"

設置其勾選事件

??? //單選框選中數據handleDetailSelectionChange(selection) {if (selection.length > 1) {this.$refs.tb.clearSelection();this.$refs.tb.toggleRowSelection(selection.pop());} else {this.checkedDetail = selection;}},

實現單選并保存選中項。

前提要設置el-table的ref="tb"并且this.checkedDetail 需要提前聲明

? data() {return {//選中的從表數據checkedDetail: [],

然后添加了一列序號用來保存行的索引號，通過設置el-table的

?:row-class-name= "rowClassName"

來實現

??? rowClassName({ row, rowIndex }) {row.xh = rowIndex + 1;},

然后怎樣對每個控件進行v-model數據綁定，通過

? v-model="bcglXiangXiList[scope.row.xh-1].ts"

使用scope.row可以獲取到當前行對象。

通過scope.row.xh可以獲取到當前行的xh字段屬性，因為之前設置了xh為行的索引+1

而數組的索引從0開始，所以這里是xh-1

??????????? <template slot-scope="scope"><el-selectclearable@change="changezdts(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].ts"><el-optionv-for="dict in zdtsOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template>

?

總結

以上是生活随笔為你收集整理的ElementUI中的el-table怎样实现每一列显示的是控件并能动态实现双向数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。