element ui 表格里复选框（权限管理）

qq_27395699

已于 2022-05-21 10:20:16 修改

阅读量829

点赞数

文章标签： elementui 前端 javascript

于 2022-05-06 15:26:44 首次发布

本文链接：https://blog.csdn.net/qq_27395699/article/details/124610977

版权

element ui 表格里复选框（权限管理）

前言

`提示：element UI 表格里添加复选框，后台分页

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

1.界面

代码如下（示例）

2.部分代码

代码如下（示例）：

<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品">
            <el-input v-model="formInline.materiel_erp_code" placeholder="ERP编码"></el-input>
        </el-form-item>
        <el-form-item label="工单">
            <el-input v-model="formInline.work_order_nubmer" placeholder="工单号"></el-input>
        </el-form-item>
        <el-form-item label="工艺">
            <el-select v-model="formInline.technology_id" placeholder="工艺">
                <el-option label="请选工艺" value=""></el-option>
                <el-option label="SMT" value="1"></el-option>
                <el-option label="后焊" value="2"></el-option>
                <el-option label="组装" value="3"></el-option>
                <el-option label="包装" value="4"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <template>
        <div>
            <el-table border :data="tableData" >
                <el-table-column label="产品"  width="300" align="left" prop="materiel_erp_code"></el-table-column>
                <el-table-column label="工单"    width="200" align="left" prop="work_order_nubmer"></el-table-column>
                <el-table-column label="工序" align="left">
                    <template #default="scope">
                        <el-checkbox-group v-model="scope.row.ischeckAll">
                            <el-checkbox v-for="item in scope.row.interestList" :value="item.work_id" :label="item.work_id" :key="item.work_id">{{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 50,100,200,400]"
                        :page-size="1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <div style="margin-top: 10px;margin-bottom: 10px">
                <el-button type="primary" size="small" @click="taskAddClick">确认选择</el-button>
            </div>
        </div>
    </template>
</div>