封装uniapp-uni-table组件,获取点击行事件,可传入自定义表头,传入后端数据,获取多选数据(其中行点击事件只有H5端可以用)附有完整代码

封装uniapp-uni-table组件,获取点击行事件,可传入自定义表头,传入后端数据,获取多选数据(其中行点击事件只有H5端可以用)附有完整代码_第1张图片

功能如下:↓

 封装uniapp-uni-table组件,获取点击行事件,可传入自定义表头,传入后端数据,获取多选数据(其中行点击事件只有H5端可以用)附有完整代码_第2张图片

 传值如下↓

		data() {
			return {
				tableParam: {
					type: "selection",  //是否可以多选
					loading: false,//加载状态
					operate: true,//是否显示操作区域
					header: [{ //表头
						width: 90,
						text: "位置",
						value: "local",
						
					}, {
						width: 80,
						text: "评分",
						value: "score",
					}, ],
					body: [],  //后端的数据
				},
				selectDatas: [], //复选框选中的值
			}
		},
		mounted() {

		},
		onLoad(options) {
			setTimeout(() => {
				this.tableParam.body = [{   //模拟后端数据
						local: "S1",
						score: 111,
						id: 1,
					},
					{
						local: "S2",
						score: 222,
						id: 2
					},
				]
			}, 1000)
		},

组件传值注释↓

		/**
		 * @property {Object} tableParam 表格
		
		 * @event {Function} getCurrentRow(i,row) 获取行索引以及事件
		 * @event {Function} addTable 增加按钮回调
		 * @event {Function} editTable 编辑按钮回调
		 * @event {Function} delTable 删除按钮回调
		 * @event {Function} selectionChange() 获得左侧多选框所选数据
		 * @event {Function} returnParams() 返回表格所有数据
		 * 
		 */

完整代码如下↓

父页面↓





table组件↓





你可能感兴趣的:(uni-app)