vue+element多選下拉框表格數據回顯

先看完成的圖片

1.首先就是基本框架，要多選必須在el-select中加multiple，filterable是可以搜索。

<div class="widget-body">
                            <div class="widget-main">
                                <template>
                                    <el-table v-loading="loading"
                                              :data="tableData.slice((pageIndex-1)*pageSize,pageIndex*pageSize)"
                                              stripe
                                              ref="multipleTable"
                                              style="width: 100%">
                                        <el-table-column fixed
                                                         type="index"
                                                         label="#"
                                                         width="50">
                                        </el-table-column>
                                        <el-table-column prop="STAFF_NUMBER"
                                                         label="工 號">
                                        </el-table-column>
                                        <el-table-column prop="USER_NAME"
                                                         label="姓 名">
                                        </el-table-column>
                                        <el-table-column prop="ABBREVIATION_NAME"
                                                         label="所在部門">
                                        </el-table-column>
                                        <el-table-column prop="options"
                                                         label="管轄部門">
                                            <template slot-scope="scope">
                                                <el-select v-model="scope.row.options" placeholder="請選擇" filterable multiple size="small">
                                                    <el-option v-for="item in ddlDept"
                                                               :key="item.Value"
                                                               :label="item.Text"
                                                               :value="item.Value">
                                                    </el-option>
                                                </el-select>
                                               
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center"
                                                         label="操作"
                                                         :key="8"
                                                         width="180">
                                            <template slot-scope="scope">
                                               
                                                <el-button size="mini"
                                                           type="primary"
                                                           icon="el-icon-success"
                                                           @*v-if="scope.row.show"*@
                                                           @@click="SaveRow(scope.row)">完成</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    
                                    <!-- 分页 -->
                                    <el-pagination @@size-change="pageSizeChange"
                                                   @@current-change="pageIndexChange"
                                                   :current-page="pageIndex"
                                                   :page-sizes="[5, 10, 20, 50, 100]"
                                                   :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                                                   :total="tableData.length">
                                    </el-pagination>
                                    <!-- /End 分页 -->
                                </template>

                            </div>
                        </div>

 data() {
                return {
                    loading: true,
                    // 表格
                    tableData: [],
                    ddlDept: [],
                    options: [],
                    show: false,
                    // 默认显示第几页
                    pageIndex: 1,
                    // 默认每页显示的条数（可修改）
                    pageSize: 10,
                }
            },
// 实例被挂载后调用
            mounted() {
                this.getTableData();
                this.formDept();
                //this.setDept();
                
            },

2.要回顯數據必須要查數據，已經選擇的數據存在options裡面，因為有多個，所以options必須是數組。ddlDept用來存放你的所有下拉框數據。

3.c#後端獲取下拉框數據，上面mounted裡面已經掛載下面的方法，所以頁面刷新就會調用下拉框選項。

 public class DDLResult
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }

public ActionResult getID()
        {
            string sql = @"select ID,NAME from PEW_DEPARTMENT";
            DataTable dtTime = pew.ExcuteSql(sql, "IQCDB").ToDataSet().Tables[0];
            List<DDLResult> list = new List<DDLResult>();

            for (int i = 0; i < dtTime.Rows.Count; i++)
            {
                DDLResult group = new DDLResult();
                group.Value = dtTime.Rows[i]["ID"].ToString();
                group.Text = dtTime.Rows[i]["NAME "].ToString();
                list.Add(group);
            }
            return Json(list);
        }

formDept() {
                    // 发送 post 请求
                    this.$http.post('getID',
                        {
                        }
                    ).then(function (res) {
                        if (res.body.length != 0) {
                            this.ddlDept = res.body;
                            //console.log(this.ddlDept);
                        }
                    });
                },

4.獲取表格數據,因為後端傳過去的數據是個對象，所以我們在前端下拉框會收不到數據，需要取出它的id，注意options不要使用text，要用對象的value,一定要和ddlDept一樣，這樣就可以回顯出來，並且下拉框也會選擇上，如果使用text,只會回顯文字，下拉框沒有選擇。

public ActionResult getDept()
        {
            var msg = "";
            bool isSucceed = false;
            string strData = "";

            try
            {
                string staffnumber = "";
                DataTable dt_station = new DataTable();
                dt_station.Columns.Add("name", Type.GetType("System.String"));
                dt_station.Columns.Add("age", Type.GetType("System.String"));
                dt_station.Columns.Add("sex", Type.GetType("System.String"));
                dt_station.Columns.Add("GOVERNMENT", Type.GetType("System.String"));
                VisibleController visibleController = new VisibleController();
                
                string sql = @"select name,age,sex from user  ";
                DataTable dtTimes = pew.ExcuteSql(sql, "aaaa").ToDataSet().Tables[0];
                for (int j = 0; j < dtTimes.Rows.Count; j++)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add("ID", Type.GetType("System.String"));
                    dt.Columns.Add("sex", Type.GetType("System.String"));
                    name= dtTimes.Rows[j]["name"].ToString();
                    string sql1 = @"select ID,sex from from user";
                    DataTable dtTime = pew.ExcuteSql(sql1, "aaaa").ToDataSet().Tables[0];
                    //string[] arr = new string[] { };
                    for (int i = 0; i < dtTime.Rows.Count; i++)
                    {
                        DataRow dtRows = dt.NewRow();
                        dtRows["ID"] = dtTime.Rows[i]["ID"].ToString();
                        dtRows["sex"] = dtTime.Rows[i]["sex"].ToString();

                        dt.Rows.Add(dtRows);
                        
                    }
                    string str = Newtonsoft.Json.JsonConvert.SerializeObject(dt);
                    DataRow dtRow = dt_station.NewRow();
                    dtRow["name"] = name;
                    dtRow["age"] = dtTimes.Rows[j]["age"].ToString();
                    dtRow["sex"] = dtTimes.Rows[j]["sex"].ToString();
                    dtRow["GOVERNMENT_DEPT"] = str;

                    dt_station.Rows.Add(dtRow);
                }
                strData = Newtonsoft.Json.JsonConvert.SerializeObject(dt_station);

                msg = "成功";
                isSucceed = true;
            }
            catch (Exception ex)
            {
                msg = "獲取數據異常" + ex;
                isSucceed = false;
            }
            DataResult result = new DataResult
            {
                IsSucceed = isSucceed,
                Result = strData,
                Message = msg,
                StatusCode = 0,
                Total = 0,
            };
            return Json(result);
        }

getTableData(page) {
                    // 回到第一頁
                    if (page == 1) {
                        this.pageIndex = 1
                    }
                    // 发送 post 请求
                    this.$http.post('getDept',
                        {
                            //staff: this.searchform.STAFF_NUMBER
                        }
                    ).then(function (res) {
                        if (res.body.IsSucceed) {
                            var data = JSON.parse(res.body.Result);
                            var arr = [];
                            if (data.length > 0) {
                                for (var i = 0; i < data.length; i++) {
                                    var obj = {};
                                    if (data[i].GOVERNMENT.length > 0) {
                                        var new_data = JSON.parse(data[i].GOVERNMENT);
                                        
                                        obj.name= data[i].name;
                                        obj.age= data[i].age;
                                        obj.sex= data[i].sex;
                                        var arr1 = [];
                                        for (var j = 0; j < new_data.length; j++) {
                                            arr1.push(new_data[j].id);
                                        }
                                        obj.options = arr1;
                                        arr.push(obj);
                                    }
                                }
                            }
                            this.tableData = arr;
                            this.loading = false;
                        } else {
                            this.loading = false;
//this.searchform.STAFF_NUMBER = "";
                        }
                        this.loading = false;
                    });
                },