element-UI表格，实现多选和下拉框选择数据

element-UI表格的使用，实现多选和下拉框选择数据

---

---

实现效果

大致的展示效果就是这样，element-UI的表格，里面包含了内容选择和勾选

这是接口返回的数据，其中ShipStations里面是表格下拉框里面的数据，
ShipSupplier是表格易一横列其他的数据，如物流公司、编码什么的

---

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.视图

视图代码如下（示例）：

<el-table ref="multipleTable"
         :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="100">
    </el-table-column>
    <el-table-column prop="ShipSupplier.Name"
                     label="物流公司"
                     width="300">
    </el-table-column>
    <el-table-column label="快递站点">
        <template slot-scope="scope">
            <el-select size="small" value-key="Code" v-model="scope.row.date" placeholder="请选择">
                <el-option v-for="item in scope.row.ShipStations"
                           :key="item.Code"
                           :label="item.Name"
                           :value="item">
                    <span style="float: left;margin-right:30px;width:100px;">{{ item.BranchCode }}</span>
                    <span style="float: left;margin-right:30px;width:180px;">{{ item.Name }}</span>
                    <span style="float: left;margin-right:30px;">{{ item.Address }}</span>
                </el-option>
            </el-select>
        </template>
    </el-table-column>
</el-table>

这里的:data="tableData"就是上面接口返回的数据，然后保存为tableData的数组对象。
tip：因为我们的下拉框在这个项目里面要显示一些信息，所以

所以下拉框里面这段代码就是下拉框显示多个内容

然后下拉框选择之后，只显示一个就用到了element-UI里面select中的一个属性value-key="Code"，这个属性是作为 value 唯一标识的键名，绑定值为对象类型时必填

2.data

代码如下（示例）：

data() {
    return {
        multipleSelection: [],
        tableData: [],
    };
},

2.method

代码如下（示例）：

// 选择物流公司、站点全选（表格第一列复选框的勾选）
toggleSelection(rows) {
    if (rows) {
        rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
        });
        console.log(rows)
    } else {
        this.$refs.multipleTable.clearSelection();
    }
},

// 选择物流公司、站点check（单个复选框勾选）
handleSelectionChange(val) {
    this.multipleSelection = val;
    console.log(this.multipleSelection)
},

这个就是表格复选框勾选后返回的对象了，其中data就是你下拉框的数据

---

总结

以上就是这篇要讲的内容，本文仅仅简单介绍了element-UI表格，实现多选和下拉框选择数据的使用，而element提供了大量能使我们快速便捷地处理数据的组件和使用方法。

要是使用过程出现问题，或者有疑问，欢迎留言评论，我会及时解答的