ElementUI主从表设计最重要的几个属性

最新推荐文章于 2022-11-18 11:13:28 发布

joman5

最新推荐文章于 2022-11-18 11:13:28 发布

阅读量633

点赞数

分类专栏： Web Delphi 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/joman5/article/details/125595275

版权

Delphi 同时被 2 个专栏收录

21 篇文章 3 订阅

订阅专栏

Web

5 篇文章 1 订阅

订阅专栏

在我们进行功能开发时，时常遇到主表关联明细表的要求，比如，需要查看工厂，同时需要查看工厂下的生产设备，这是在前端界面就需要进行相应的开发工作，在使用ElementUI时，可以使用 table的展开方式进行操作。下面是设计是table最最重要的几个属性。

:expand-row-keys="expends" 展开集合，设定需要展开选择的 row-key值，数组

:row-key="getRowKeys" 设定选中行的key值

@expand-change="rowExpand" 选中变动时触发的方法。

明细表界面效果

getRowKeys：方法

getRowKeys(row) {

return row.id 返回数据的id值作为行key值

},
rowExpand：方法 selectid 全局变量，否则无法关闭展开。

rowExpand(item) {

if (selectid == item.id) {

this.expends = [];

selectid=0;

} else {

this.expends = [item.id];

selectid = item.id;

this.getdetail(item.id);

}

},
完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <#include file="/include.html" />
    <!--引用了element等类库-->
</head>
<div id="app" v-cloak>
    <el-button-group>
        <el-button @click="getfactory" icon="el-icon-refresh">刷新
        </el-button>
    </el-button-group>
    <el-table border style="width: 100%;" :data="tableData" size="medium" :expand-row-keys="expends"
        :row-key="getRowKeys" @expand-change="rowExpand">
        <el-table-column label="" width="60" type="expand">
            <template slot-scope="props">
            <el-table border style="width: 100%; margin-top: -17px;margin-bottom: -17px; " :data="detailData"
                size="medium">
                <el-table-column label="设备编号" prop="DeviceID" width="300">
                </el-table-column>
                <el-table-column label="生产日期" prop="Fac_Date">
                </el-table-column>
                <el-table-column label="生产批次" prop="Fac_No" width="300">
                </el-table-column>
            </el-table>
            </template>

        </el-table-column>
        <el-table-column label="序号" prop="id" width="60"></el-table-column>
        <el-table-column label="生产厂家" prop="name" width="300">
        </el-table-column>
        <el-table-column label="电话" prop="phone">
        </el-table-column>
        <el-table-column label="联系人" prop="person">
        </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount">
    </el-pagination>
</div>
<script>
    let selectid = 0;
    new Vue({
        el: "#app",
        created() {
            this.getfactory();
        },
        data() {
            return {
                expends: [],
                detailData:[],
                tableData:[],
                currentPage: 1, //初始页
                pagesize: 10,    //    每页的数据
                totalcount: 0,
            }
        },
        methods: {
            getRowKeys(row) {
                return row.id
            },
            rowExpand(item) {

                if (selectid == item.id) {
                    this.expends = [];
                    selectid=0;
                } else {
                    this.expends = [item.id];
                    selectid = item.id;
                    this.getdetail(item.id);
                }

            },
            getdetail(factoryid) {
                this.$http.post('/device/getdetail', { factoryid: factoryid })
                    .then(res => {  //这是从本地请求的数据接口，
                        this.detailData = res.body;
                        console.log(this.detailData)
                    })
            },
            getfactory() {
                this.$http.post('/device/getfactory', { page: this.currentPage, limit: this.pagesize })
                    .then(res => {  //这是从本地请求的数据接口，
                        this.tableData = res.body.data;
                        this.totalcount = res.body.count;
                    })
            },
            handleSizeChange(size) {
                this.pagesize = size;
                this.getfactory();
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getfactory();
                console.log(this.currentPage)  //点击第几页
            },
        }
    });
</script>

</html>