网站展示模板psd下载,百度文库推广网站,电子商务网站规划设计方案,山东天狐做网站cms在写这个表格组件之前#xff0c;要了解 slot 插槽的使用。
目录
1.子组件#xff1a;子组件调用父组件的方法 this.$parent.方法名
2.父组件使用
2.1 父组件#xff08;普通表格#xff09;#xff1a;
2.2 父组件#xff08;表格中的某一项数据需要修改#xff0…在写这个表格组件之前要了解 slot 插槽的使用。
目录
1.子组件子组件调用父组件的方法 this.$parent.方法名
2.父组件使用
2.1 父组件普通表格
2.2 父组件表格中的某一项数据需要修改
2.3 父组件带操作列的表格
注意 1.子组件子组件调用父组件的方法 this.$parent.方法名
templatediv idtable classbg pd20!-- 表格 --el-table :datatableData border classmyTable :header-cell-style{background:#D9FFF2} stylewidth:100%!-- 表格扩展 --el-table-column typeexpand width30template slot-scopepropsel-form label-positionleft inline classdemo-table-expand cleartemplate el-form-item v-for(info, infoId) in tableInfo :keyinfoId :labelinfo.valuespan{{props.row[info.key]}}/span/el-form-item/template/el-form/template/el-table-column!-- 表格内容 --el-table-column typeindex :indexindexMethod width60 label序号 aligncenter/template v-for(info, infoIndex) in tableInfoel-table-column :keyinfoIndex :propinfo.key :labelinfo.value aligncenter :min-widthinfo.minWidth show-overflow-tooltip !-- slot :nameinfo.key :datainfo :indexinfoIndex/slot --!-- 给插槽命名、传值、序列号使用插槽时记得传dealData --template slot-scopescopeslot :nameinfo.key :datascope.row :indexinfoIndex v-ifinfo.dealData/slotspan v-else{{scope.row[info.key]}}/span/template/el-table-column/template !-- 是否需要操作列默认不需要需要时父组件设置operateShow记得传操作这一列的宽度否则默认宽为200 --el-table-column v-ifoperateShow label操作 aligncenter :min-widthoperateWidth fixedrighttemplate slot-scopescopeslot nameoperate :datascope.row/slot/template/el-table-column /el-table!-- 分页 --pagination :totaltotal pageChangepageChange :pageNumpage.pageNum/pagination/div
/templatescript
import pagination from /components/pagination;
export default {components: {pagination},props:{tableData: { //el-table组件绑定的数据type: Array,require: true},tableInfo: { //表格显示的字段和字段名称type: Array,require: true},total: { //页码总数type: Number,require: true,default: 0},operateShow: { //操作栏是否显示默认不显示type: Boolean,default: false},operateWidth: { //操作栏宽type: String,default: 200}},data() {return {page: { //表格字段pageNum: 1,pageSize: 10 }}},watch: {total: function(newV, oldV){this.total newV;},$parent.searchForm.pageNum: function(newV, oldV){this.page.pageNum newV;}},methods: {//表格自定义序号indexMethod(index) {return (this.page.pageNum-1)*this.page.pageSize (index1) ;},//分页pageChange(val) {this.page.pageNum val; //给组件中的pageNum传值自定义序号会用到this.$parent.initData(val); //调用父页面的initData方法},}
}
/script 2.父组件使用
2.1 父组件普通表格
templatediv classbgmy-table :tableDatatableData :tableInfotableInfo :totaltotal/my-table/div
/templatescript
import myTable from /components/table;
export default {components: {myTable},data() {return {searchForm:{ //请求参数endTime:2021-07-15,startTime:2020-07-01,pageNum:1,pageSize:10},total: 0, //页码需要的参数tableData: [], //后台传过来的数据tableInfo: [{key: firstLabelQr, value: 首QR, minWidth: 180},{key: lastLabelQr, value: 末QR, minWidth: 180},{key: skuId, value: SKU_ID, minWidth: 160},{key: skuName, value: 产品名称, minWidth: 160},{key: totalNum, value: 标签总数, minWidth: 90},{key: realNum, value: 实贴标数, minWidth: 90},{key: voidNum, value: 废标数, minWidth: 90},{key: activeTime, value: 上传时间, minWidth: 150}]}},methods: {initData(pageNum){ //参数用于table组件父级页面使用该函数时不需要传参this.searchForm.pageNum pageNum ? pageNum : 1; //这行语句必填。this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res {this.tableData res.datas.records;this.total res.datas.total;})}},created(){this.initData();}
}
/script 如果觉得 this.searchForm.pageNum pageNum ? pageNum : 1; //这行语句必填。 这样写太难理解也可以这样 methods: {initData(pageNum){ //参数用于table组件this.searchForm.pageNum pageNum; //这行语句必填。原因是参数有可能是子组件中的分页传过来的参数this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res {this.tableData res.datas.records;this.total res.datas.total;})}},created(){this.initData(1); //在这里传参初始默认pageNum为1}
2.2 父组件表格中的某一项数据需要修改
注意tableInfo 传参的时候给要修改的那一项添加 dealData: true。 div classbgmy-table :tableDatatableData :tableInfotableInfo :totaltotaltepmlate slotactiveTime lot-scopemyPropsspan v-ifmyProps.data.activeTime{{myProps.data.activeTime}}/spanspan v-else2021-12-19/span/template/my-table
/divdata() {return {searchForm:{ //请求参数endTime:2021-07-15,startTime:2020-07-01,pageNum:1,pageSize:10},total: 0, //页码需要的参数tableData: [], //后台传过来的数据tableInfo: [{key: firstLabelQr, value: 首QR, minWidth: 180},{key: lastLabelQr, value: 末QR, minWidth: 180},{key: activeTime, value: 上传时间, minWidth: 150, dealData: true}] //dealData: true给要处理的某条数据添加这个属性和属性值。}},methods: {initData(pageNum){ //参数用于table组件父级页面使用该函数时不需要传参this.searchForm.pageNum pageNum;this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res {this.tableData res.datas.records;this.total res.datas.total;})}},created(){this.initData(1);}
2.3 父组件带操作列的表格
div!-- 如果有操作项父组件设置operateShow操作栏最小宽度operateWidth可不传 --my-table :tableDatatableData :tableInfotableInfo :totaltotal operateShow operateWidth130template slotoperate slot-scopemyProps !-- 通过slot-scope来承载数据 --el-button typewarning sizemini iconel-icon-edit-outline clickdelete(myProps.data.id)下载/el-button/template/my-table
/divdata(){return {searchForm: { //请求参数endTime:2021-07-15,startTime:2020-07-01,pageNum: 1,pageSize: 10},total: 0, //页码需要的参数tableData: [], //后台传过来的数据tableInfo: [{key: bill, value: 单号, minWidth: 170},{key: status, value: 生成状态, minWidth: 170},{key: downloadCount, value: 下载次数, minWidth: 170}]}},methods: {delete(id){console.log(id);//删除数据的异步操作。常操作完会调用initData初始化数据注意这里的传参【注1】this.initData( 1 ); //},initData(pageNum){ //参数用于table组件父级页面使用该函数时不需要传参 this.searchForm.pageNum pageNum ; //这行语句必填。this.$axios.post(this.$api.downloadIntegralCode, this.searchForm).then( res {this.tableData res.datas.records;this.total res.datas.total;})}},created(){this.initData(1);}
注意
如果删除数据后页码数直接跳转到1那么初始化数据的方法 this.initData(1); 中直接传个1就可以了。通常我们想要看到操作的那一页所以这里 initData 传的参数要做一下处理。在公共的 js 文件中
//返回表格操作时的页数。
/*** * param {*} name 操作类型* param {*} total 总数页面中一般传固定的值this.total* param {*} pageNum 页数页面中一般传固定的值 this.search.pageNum* param {*} pageSize 可省略默认为10若this.search.pageSize改变则需要传* returns */
const pageNum (name, total, pageNum, pageSize10) {//添加与其他操作不一样提前将页数设置为还未生成的页数样式不会生效。//因为页码是在调用接口生成数据后得到total值才显示if(nameadd){return pageNum;} else if(nameupdate){return Math.ceil( total/pageSize );} else if(namedelete){return Math.ceil( (total-1)/pageSize );}
}export { pageNum }
使用
import { pageNum } from /filters/common;delete(id){console.log(id);//删除数据的异步操作。常操作完会调用initData初始化数据注意这里的传参【注1】this.initData( pageNum(delete, this.total) );
} 注意上面提到 添加的操作与其他操作不一样所以对它的传参方式有几种
//方法一保证代码统一性使用pageNum
import { pageNum } from /filters/common;
add(id){console.log(id);//添加数据的异步操作。常操作完会调用initData初始化数据注意这里的传参this.initData( pageNum(add, this.total, this.searchForm.pageNum) );
}//方法二便捷直接传参
add(id){console.log(id);//添加数据的异步操作。常操作完会调用initData初始化数据注意这里的传参this.initData( this.searchForm.pageNum );
}
