main.js
数据渲染模式 支持大量数据的操作
template
ctrl+小键盘左键退格 tab键进格 修改下拉 或者 初始化下拉数据的值的时候 必须 同时给 到或者拥有 code 和 str(编号和名称) 必须要求后端给到 如：this.$refs.suTableSyncFef.setData(0,{sucai:'3',sucaiStr:'菠菜头头'}); 修改行数据请使用setData方法 如: 修改第一行的数据 this.$refs.suTableSyncFef.setData(0,{suChecked:true} 增删 等 操作必须使用 push unshift splice 等 原生方法 首次赋值之后禁止直接对数组进行赋值操作 赋值空数组除外 <!--<p style="color: red;margin-bottom: 20px"> 使第一行复选框勾选 <br>如: this.$refs.suTableSyncFef.setData(0,{suChecked:true} <br> 获取勾选状态的数据请 循环 判断 suChecked 为 true 的 </p>--> 组件 su-table-sync 用于开启大量数据渲染模式 具体使用见示例 组件 su-table-menban 用于编写自定义下拉弹窗 具体使用见示例 组件 su-table 用于渲染表格 参数 :rowClass //自定义行的class 可以绑定 string function :colClass //自定义列的class 可以绑定 string function 方法 @rowClick //单机触发 @rowDblclick //双击触发 @checkedChange //复选框改变时触发 @lastEntry //最后一行切换后执行 @tableBottom //普通模式启用 滚动到最后一行执行 $refs.suTable.set_activeindex(0) //单选第一行 $refs.suTableRef.set_checkboxindex(1,true) //修改第二行复选选框状态 为选中 组件 su-table-column 用于渲染列 参数 :fixed="true" (设置当前列浮动) type='checkbox' (设置列为复选框列) label='名字'(表头文字) prop="name"(字段名) 自定义 列 详情见示列 自定义 表头 详情见示列 组件 su-table-edit 用于td编辑 参数 disabled // true/false 可编辑/不可编辑 layer="select" //单选下拉 layer="selectSrarch" //搜索下拉 layer="input" //普通input输入 layer="auto" //自定义内容下拉弹窗 type="date" //日期选择 和 layer="input"同时使用生效 type="time"//时间选择 和 layer="input"同时使用生效 :col="scope.$colIndex"(必填) :row="scope.$rowIndex"(必填) :dflabel.sync //用于layer="selectSrarch" layer="select"绑定默认中文 select_label //用于单选多选指定 name字段名 select_value //用于单选多选指定 code字段名 方法 @openEdit //打开编辑时触发 @autoKeyup //layer="auto" 自定义弹窗打开同时 按键盘 触发 @confirm //enter键触发 选中下拉时触发 @editValueChange //input框输入时触发 @selectSearch //layer="selectSrarch" input框输入时触发 打开时会默认触发一次 新增尾行并选中 新增首行并选中 删除选中行 修改下拉值 单选第一行 多选第二行 <!--自定义头部--> 自定义头部+自定义内容 姓名年龄 <!--自定义td内容--> {{scope.row.old}}{{scope.row.name}}{{scope.row.year}} <!-- <su-table-column label='普通input'> <template slot-scope="scope"> <su-table-edit @confirm="inputConfirm" @editValueChange="valuechangefn" :col="scope.$colIndex" :row="scope.$rowIndex" layer="input" v-model="scope.row.name" ></su-table-edit> </template> </su-table-column>--> <!-- <su-table-column label='自定义下拉'> <template slot-scope="scope"> <su-table-edit :col="scope.$colIndex" :row="scope.$rowIndex" layer="selectSearch" select_label="label" select_value="value" :selectData="selectSearchDatatwo" v-model="scope.row.sucai2"> </su-table-edit> </template> </su-table-column>--> <!--{{su_tableData}}--> js
{ return su_menban_1:false actives:'1' selectData: value:'1'label:'白菜' value:'2'label:'花菜' value:'3'label:'菠菜头头' value:'4'label:'白菜1' value:'5'label:'花菜2' value:'6'label:'菠菜头头3' value:'7'label:'白菜4' value:'8'label:'花菜5' value:'9'label:'菠菜头sdfsdfsfdsfsdf头6' selectSearchData: value:'51'label:'51白菜' value:'52'label:'52花菜' value:'53'label:'53菠菜头头' value:'54'label:'54西蓝花1' value:'55'label:'55户罗布2' value:'56'label:'56青椒3' value:'57'label:'57冰块4' value:'58'label:'58黄瓜5' value:'59'label:'59油条大油条大大的油条' selectSearchDatatwo: su_tableData:name:'莞'old:'213'index:11111sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10'orderText:'12dsfsdfsdfsdfsdfsdfsdfsdfsdf3' menban_table: name:'莞1'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞2'old:'213'index:2sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞3'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞4'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞5'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞6'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞7'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞8'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞9'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞10'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞11'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' name:'莞12'old:'213'index:1sucai2:'57'sucai2Str:'57冰块4'sucai:'2'sucaiStr:'花菜'date:'2011-11-11'time:'15:10' } //props:['su_tableData'], name: 'home' { forvar lsd=0;lsd<1000;lsd++ thissu_tableData // this.su_tableData.push({checked:true}) //在表格初始化完毕后 修改第1 5 15行选中状态为true /* this.$refs.suTableSyncFef.init_end(()=>{ this.$refs.suTableSyncFef.setData(0,{suChecked:true}); this.$refs.suTableSyncFef.setData(5,{suChecked:true}); this.$refs.suTableSyncFef.setData(15,{suChecked:true}); });*/ } methods: //复选框改变 { console } //表格滚动到底部 触发 只有 非数据渲染的表格有效 { forvar sdfg=0;sdfg<20;sdfg++ thismenban_table } //td进入编辑状态时触发 { console } //点击自定义弹窗内的表格将 点击行的 参数 赋值到 表格中 并且跳转到下一格 { console; this$refssuTableSyncFef; this$refssuTableRefisEditRef; } //单选第一行 { this$refssuTableRef; //this.su_tableData[0].suActive=true } //多选第二行 { this$refssuTableRef; //this.su_tableData[0].suActive=true } //行双击 { console } //行点击 { // console.log(val) } //自定义弹层 任意按键操作后触发 用于控制弹层 调用next进入下一格 { console; // this.$refs.suTableSyncFef.setData(data.row,{orderText:data.value}); ifdatakeyCode=='13' let select_row=this$refsmenban1SuTableRef; this$refssuTableSyncFef; ifdatakeyCode=='9' } //修改第一行的下拉值 { this$refssuTableSyncFef; } //删除选中行 { forvar mmp=thissu_tableDatalength-1;mmp>=0;mmp-- ifthissu_tableDatammpsuChecked thissu_tableData /* if(arr.suChecked){ this.su_tableData.splice(index,1) }*/ //splice } //新增一行到首行 { thissu_tableData; this } //新增一行到最后 { thissu_tableData; this } //可选函数 最后一行切换自动添加一行 { console; thissu_tableData; this } //可选函数 值改变触发 { console } //input输入的同时赋值 { this$refssuTableSyncFef; } //搜索下拉 提交触发 { //需要手动赋值 this$refssuTableSyncFef; //调用next 跳转到下一格 } //搜索下拉 搜索时触发 默认节流防抖200毫秒 { console; // 300毫秒从后台获得数据 然后赋值 } //可选函数 对单元格赋值时触发 { console; //{row: 12, col: 2, value: "莞123123", label: ""} //在此添加拦截 ifvallabel=='白菜' this$refssuTableRef; return this$refssuTableRef; //需要手动赋值 this$refssuTableSyncFef; //调用next 跳转到下一格 } { console; //{row: 12, col: 2, value: "莞123123", label: ""} iftypeof == 'number' && <999 this$refssuTableRef; return this$refssuTableRef; //需要手动赋值 this$refssuTableSyncFef; //调用next 跳转到下一格 } //行自定义class函数 { ifdata$copyIndex==3 return 'zdy_row_class' else return '' } //列自定义class函数 { ifdata=='date' && rowData$copyIndex==7 return 'zdy_col_class' } </script> 普通模式 支持大约100行以内的数据操作
template
<!--自定义头部--> 自定义头部+自定义内容 姓名年龄 <!--自定义td内容--> {{scope.row.old}}{{scope.row.name}}{{scope.row.year}} js
{ return actives:'1' selectData: value:'1'label:'白菜' value:'2'label:'花菜' value:'3'label:'菠菜头头' value:'4'label:'白菜1' value:'5'label:'花菜2' value:'6'label:'菠菜头头3' value:'7'label:'白菜4' value:'8'label:'花菜5' value:'9'label:'菠菜头sdfsdfsfdsfsdf头6' su_tableData: } name: 'home' { forvar lsd=0;lsd<100;lsd++ thissu_tableData } methods: //值改变触发 { console }