@leevan/jtui 1.2.7 → 2.0.1

package/examples/tableTest/table-dsj.vue

@@ -0,0 +1,209 @@
+<template>
+    <div style="height:100%">
+        <div style="margin-bottom:12px;">
+            <el-button size="mini" @click="exportTableData">导出数据</el-button>
+            <el-button size="mini" @click="importData">导入数据</el-button>
+            <el-button size="mini" @click="clearData">清空数据</el-button>
+            <el-switch
+                v-model="isTool"
+                active-color="#13ce66"
+                inactive-text="筛选列"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="stripe"
+                active-color="#13ce66"
+                inactive-text="斑马线"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isCheckbox"
+                active-color="#13ce66"
+                inactive-text="复选框"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isRadio"
+                active-color="#13ce66"
+                inactive-text="单选框"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isWrap"
+                active-color="#13ce66"
+                inactive-text="表头换行"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isSeq"
+                active-color="#13ce66"
+                inactive-text="序号"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="loading"
+                active-color="#13ce66"
+                inactive-text="加载动画"
+                inactive-color="#ff4949">
+            </el-switch>
+        </div>
+        <div style="position:relative;height:600px">
+            <jt-table-pc
+            id="table-ptbg"
+            ref="tablePtbg"
+            tableType="bigData"
+            :data="tableData[0]"
+            :isTool="isTool"
+            :stripe="stripe"
+            :isFooter="isFooter"
+            :footConfig="footConfig"
+            :checkbox="isCheckbox"
+            :radio="isRadio"
+            :isWrap="isWrap"
+            :isSeq="isSeq"
+            @scrollBottom="scrollBottom"
+            @cellClick="cellClick"
+            @radio="radio"
+            @checkbox="checkbox"
+            :expandConfig="expandConfig"
+            :rowStyle="rowStyle"
+            :cellStyle="cellStyle"
+            :handlerConfig="handlerConfig"
+            @handlerClick="handlerClick"
+            :loading="loading"
+            :cellRenderMethods="{radioChange}"
+            >
+            </jt-table-pc>
+        </div>
+    </div>
+</template>
+
+<script>
+import { data23 , data13 } from '../../packages/jt-table-pc/data2';
+    export default {
+        data(){ 
+            return {
+                isTool:true,
+                stripe:true,
+                tableData:[{retjson:{},DataArray:[],Result:""}],
+                footConfig:{filed:['count']},
+                isFooter:true,
+                isCheckbox:true,
+                isRadio:false,
+                isWrap:false,
+                isSeq:true,
+                loading:false,
+                expandConfig:{
+                    isOpen:false,  //是否开启展开行
+                    width:120,  //展开行列宽
+                    text:'测试',  //展开行说明文字
+                    accordion:true, //手风琴模式
+                    loadMethod:this.loadMethod  //内容加载函数，必须返回promise
+                },
+                handlerConfig:{
+                    show:true, //操作列的显示开关，默认false
+                    width:250,//操作列的宽度，默认250px
+                    align:'center',//操作列对齐方式，可选值`left`、`center`、`right`,默认`center`
+                    fixed:'right',//操作列固定位置，可选值`left`、`right`、空串(不固定)，默认`right`
+                    btnGroup:false,//设置true则是下拉按钮，设置false则是并排按钮（依赖element-ui）
+                }
+            }
+        },
+        created(){
+            const res = data13();
+            this.tableData[0].retjson = res[0].retjson;
+        },
+        mounted(){
+            const res = data13();
+            let timeId = setTimeout(()=>{
+                this.$refs.tablePtbg.loadData(res[0].DataArray);
+                clearTimeout(timeId);
+            },0)
+        },
+        methods:{
+            //导出数据
+            exportTableData(){
+                this.$refs.tablePtbg.exportTableData();
+            },
+            //导入数据
+            importData(){
+                this.$refs.tablePtbg.importTableData();
+            },
+            //清除数据
+            clearData(){
+                this.tableData[0].DataArray = [];
+            },
+            //滚动到底部
+            scrollBottom(idx){
+                this.$message.success('滚动到底部')
+            },
+            //单元格点击
+            cellClick(row,col){
+                if(col.type == 'checkbox' || col.type == 'radio' || col.type == 'expand' || col.title == '操作' || col.property == 'shg'){
+                    return;
+                }
+                this.$message.success(JSON.stringify(row),JSON.stringify(col));
+            },
+            //单选框选中的数据
+            radio(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //复选框选中的数据
+            checkbox(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //展开行懒加载
+            loadMethod({row}){
+                return new Promise(async resolve=>{
+                    row.data=123; //这里是把请求的数据添加到行里面，在模版中就可以访问到了
+                    resolve()
+                })
+            },
+            // 行样式
+            rowStyle({ row, rowIndex }){
+                if(rowIndex === 0){
+                    return{
+                        background:"#f00",
+                        color:"#fff"
+                    }
+                }
+            },
+            // 单元格样式
+            cellStyle({ row, rowIndex, column, columnIndex }){
+                if(rowIndex === 1 && columnIndex ===3){
+                        return{
+                            background:"#fe32a3"
+                        }
+                    }
+            },
+            //操作列
+            handlerClick(value,row){
+                //value是接口配置的值，row是当前行的数据
+                console.log(value,row);
+            },
+            //单元格渲染 - 单选
+            radioChange({row,property,val,params}){
+                return new Promise(async resolve=>{
+                    let random = Math.random();
+                    if(random > 0.5){
+                        this.$message.success('设置成功');
+                        resolve(true)
+                    }else{
+                        this.$message.warning('设置失败');
+                        resolve(false)
+                    } 
+                })
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/examples/tableTest/table-fzbg.vue

@@ -0,0 +1,163 @@
+<template>
+    <div style="height:100%">
+        <div style="margin-bottom:12px;">
+            <!-- <el-button size="mini" @click="exportTableData">导出数据</el-button>
+            <el-button size="mini" @click="importData">导入数据</el-button> -->
+            <el-button size="mini" @click="clearData">清空数据</el-button>
+            <el-switch
+                v-model="isTool"
+                active-color="#13ce66"
+                inactive-text="筛选列"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isCheckbox"
+                active-color="#13ce66"
+                inactive-text="复选框"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isWrap"
+                active-color="#13ce66"
+                inactive-text="表头换行"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isSeq"
+                active-color="#13ce66"
+                inactive-text="序号"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="loading"
+                active-color="#13ce66"
+                inactive-text="加载动画"
+                inactive-color="#ff4949">
+            </el-switch>
+        </div>
+        <div style="position:relative;height:600px">
+            <jt-table-pc
+            id="table-ptbg"
+            ref="tablePtbg"
+            tableType="group"
+            :data="tableData[0]"
+            :isTool="isTool"
+            :stripe="stripe"
+            :isFooter="isFooter"
+            :footConfig="footConfig"
+            :checkbox="isCheckbox"
+            :isExpand="false"
+            :radio="isRadio"
+            :isWrap="isWrap"
+            :isSeq="isSeq"
+            @scrollBottom="scrollBottom"
+            @cellClick="cellClick"
+            @radio="radio"
+            @checkbox="checkbox"
+            :expandConfig="expandConfig"
+            :handlerConfig="handlerConfig"
+            @handlerClick="handlerClick"
+            :loading="loading"
+            >
+            </jt-table-pc>
+        </div>
+    </div>
+</template>
+
+<script>
+import { data23 , data13 } from '../../packages/jt-table-pc/data2';
+    export default {
+        data(){ 
+            return {
+                isTool:true,
+                stripe:true,
+                tableData:[{retjson:{},DataArray:[],Result:""}],
+                footConfig:{filed:['count']},
+                isFooter:true,
+                isCheckbox:true,
+                isRadio:false,
+                isWrap:false,
+                isSeq:true,
+                loading:false,
+                expandConfig:{
+                    isOpen:false,  //是否开启展开行
+                    width:120,  //展开行列宽
+                    text:'测试',  //展开行说明文字
+                    accordion:true, //手风琴模式
+                    loadMethod:this.loadMethod  //内容加载函数，必须返回promise
+                },
+                handlerConfig:{
+                    show:true, //操作列的显示开关，默认false
+                    width:250,//操作列的宽度，默认250px
+                    align:'center',//操作列对齐方式，可选值`left`、`center`、`right`,默认`center`
+                    fixed:'right',//操作列固定位置，可选值`left`、`right`、空串(不固定)，默认`right`
+                    btnGroup:false,//设置true则是下拉按钮，设置false则是并排按钮（依赖element-ui）
+                }
+            }
+        },
+        created(){
+            const res = data23();
+            this.tableData[0].retjson = res[0].retjson;
+        },
+        mounted(){
+            const res = data23();
+            let timeId = setTimeout(()=>{
+                this.$refs.tablePtbg.default2tree(res[0].DataArray,'country');
+                clearTimeout(timeId);
+            },10)
+        },
+        methods:{
+            //导出数据
+            exportTableData(){
+                this.$refs.tablePtbg.exportTableData();
+            },
+            //导入数据
+            importData(){
+                this.$refs.tablePtbg.importTableData();
+            },
+            //清除数据
+            clearData(){
+                this.tableData[0].DataArray = [];
+            },
+            //滚动到底部
+            scrollBottom(idx){
+                this.$message.success('滚动到底部')
+            },
+            //单元格点击
+            cellClick(row,col){
+                // if(col.type == 'checkbox' || col.type == 'radio' || col.type == 'expand' || col.title == '操作' || col.property == 'shg'){
+                //     return;
+                // }
+                // this.$message.success(JSON.stringify(row),JSON.stringify(col));
+            },
+            //单选框选中的数据
+            radio(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //复选框选中的数据
+            checkbox(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //展开行懒加载
+            loadMethod({row}){
+                return new Promise(async resolve=>{
+                    row.data=123; //这里是把请求的数据添加到行里面，在模版中就可以访问到了
+                    resolve()
+                })
+            },
+            //操作列
+            handlerClick(value,row){
+                //value是接口配置的值，row是当前行的数据
+                console.log(value,row);
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/examples/tableTest/table-ptbg.vue

@@ -0,0 +1,222 @@
+<template>
+    <div style="height:100%">
+        <div style="margin-bottom:12px;">
+            <el-button size="mini" @click="exportTableData">导出数据</el-button>
+            <el-button size="mini" @click="importData">导入数据</el-button>
+            <el-button size="mini" @click="clearData">清空数据</el-button>
+            <el-switch
+                v-model="isTool"
+                active-color="#13ce66"
+                inactive-text="筛选列"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="stripe"
+                active-color="#13ce66"
+                inactive-text="斑马线"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isFooter"
+                active-color="#13ce66"
+                inactive-text="表尾"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isCheckbox"
+                active-color="#13ce66"
+                inactive-text="复选框"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isRadio"
+                active-color="#13ce66"
+                inactive-text="单选框"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="expandConfig.isOpen"
+                active-color="#13ce66"
+                inactive-text="展开行"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isWrap"
+                active-color="#13ce66"
+                inactive-text="表头换行"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="isSeq"
+                active-color="#13ce66"
+                inactive-text="序号"
+                inactive-color="#ff4949">
+            </el-switch>
+            <el-switch
+            style="margin-left:10px;"
+                v-model="loading"
+                active-color="#13ce66"
+                inactive-text="加载动画"
+                inactive-color="#ff4949">
+            </el-switch>
+        </div>
+        <div style="position:relative;height:600px">
+            <jt-table-pc
+            id="table-ptbg"
+            ref="tablePtbg"
+            :data="tableData[0]"
+            :isTool="isTool"
+            :stripe="stripe"
+            :isFooter="isFooter"
+            :footConfig="footConfig"
+            :checkbox="isCheckbox"
+            :radio="isRadio"
+            :isWrap="isWrap"
+            :isSeq="isSeq"
+            @scrollBottom="scrollBottom"
+            @cellClick="cellClick"
+            @radio="radio"
+            @checkbox="checkbox"
+            :expandConfig="expandConfig"
+            :rowStyle="rowStyle"
+            :cellStyle="cellStyle"
+            :handlerConfig="handlerConfig"
+            @handlerClick="handlerClick"
+            :loading="loading"
+            :cellRenderMethods="{radioChange}"
+            >
+            </jt-table-pc>
+        </div>
+    </div>
+</template>
+
+<script>
+import { data23 , data13 } from '../../packages/jt-table-pc/data2';
+    export default {
+        data(){ 
+            return {
+                isTool:true,
+                stripe:true,
+                tableData:[{retjson:{},DataArray:[],Result:""}],
+                footConfig:{filed:['count']},
+                isFooter:true,
+                isCheckbox:true,
+                isRadio:false,
+                isWrap:false,
+                isSeq:true,
+                loading:false,
+                expandConfig:{
+                    isOpen:false,  //是否开启展开行
+                    width:120,  //展开行列宽
+                    text:'测试',  //展开行说明文字
+                    accordion:true, //手风琴模式
+                    loadMethod:this.loadMethod  //内容加载函数，必须返回promise
+                },
+                handlerConfig:{
+                    show:true, //操作列的显示开关，默认false
+                    width:250,//操作列的宽度，默认250px
+                    align:'center',//操作列对齐方式，可选值`left`、`center`、`right`,默认`center`
+                    fixed:'right',//操作列固定位置，可选值`left`、`right`、空串(不固定)，默认`right`
+                    btnGroup:false,//设置true则是下拉按钮，设置false则是并排按钮（依赖element-ui）
+                }
+            }
+        },
+        created(){
+            const res = data23();
+            this.tableData[0].retjson = res[0].retjson;
+        },
+        mounted(){
+            const res = data23();
+            let timeId = setTimeout(()=>{
+                this.$refs.tablePtbg.loadData(res[0].DataArray);
+                clearTimeout(timeId);
+            },0)
+        },
+        methods:{
+            //导出数据
+            exportTableData(){
+                this.$refs.tablePtbg.exportTableData();
+            },
+            //导入数据
+            importData(){
+                this.$refs.tablePtbg.importTableData();
+            },
+            //清除数据
+            clearData(){
+                this.tableData[0].DataArray = [];
+            },
+            //滚动到底部
+            scrollBottom(idx){
+                this.$message.success('滚动到底部')
+            },
+            //单元格点击
+            cellClick(row,col){
+                if(col.type == 'checkbox' || col.type == 'radio' || col.type == 'expand' || col.title == '操作' || col.property == 'shg'){
+                    return;
+                }
+                this.$message.success(JSON.stringify(row),JSON.stringify(col));
+            },
+            //单选框选中的数据
+            radio(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //复选框选中的数据
+            checkbox(data){
+                this.$message.success(JSON.stringify(data));
+            },
+            //展开行懒加载
+            loadMethod({row}){
+                return new Promise(async resolve=>{
+                    row.data=123; //这里是把请求的数据添加到行里面，在模版中就可以访问到了
+                    resolve()
+                })
+            },
+            // 行样式
+            rowStyle({ row, rowIndex }){
+                if(rowIndex === 0){
+                    return{
+                        background:"#f00",
+                        color:"#fff"
+                    }
+                }
+            },
+            // 单元格样式
+            cellStyle({ row, rowIndex, column, columnIndex }){
+                if(rowIndex === 1 && columnIndex ===3){
+                        return{
+                            background:"#fe32a3"
+                        }
+                    }
+            },
+            //操作列
+            handlerClick(value,row){
+                //value是接口配置的值，row是当前行的数据
+                console.log(value,row);
+            },
+            //单元格渲染 - 单选
+            radioChange({row,property,val,params}){
+                return new Promise(async resolve=>{
+                    let random = Math.random();
+                    if(random > 0.5){
+                        this.$message.success('设置成功');
+                        resolve(true)
+                    }else{
+                        this.$message.warning('设置失败');
+                        resolve(false)
+                    } 
+                })
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>