sulibao-mini

组件说明

basic-table是基于uniapp开发的列表，参考element-ui设计api和参数,内置斑马纹，border，自定义列，宽度自动计算，合计等功能，现决定免费开源，如果对你有帮助，可给五星好评，如果需要作者帮助，可以给作者买一杯咖啡然后私聊作者。

参数说明

basic-table组件

参数	说明	类型	可选值	默认值
data	显示的数据	array	-	-
columns	表头数据	array	-	-
align	列表对齐方式	string	left/center/right	left
height	talbe的高度	string	-	-
max-height	最大高度	string	-	-
stripe	是否为斑马纹 table	boolean	true/false	false
border	是否需要外边框	boolean	true/false	false
show-header	是否显示表头	boolean	true/false	true
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	function({ row, rowIndex }) / string	-	-
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	function({ row, rowIndex }) / object	-	-
header-row-class-name	表头的class,传字符串	string	-	-
header-row-style	表头的style,传object	object	-	-
empty-text	空数据时显示的文本内容， 也可以通过 #empty 设置	string	-	暂无数据
show-footer	是否显示表尾合计项	boolean	true/false	false
footer-text	显示摘要行第一列的文本	string	-	合计
footer-method	自定义的合计计算方法	function({ columns, data })	-	-
index-show	是否显示序号	boolean	true/false	false
index-method	序号的回调方法	function(index)	-	-
index-width	序号列的宽度	string	-	60px
min-item-width	每列的最小宽度	string	-	80px

basic-table columns[]

| key | 说明 | |-----------------|------------------------------------| | fieldName | 对应的value字段 | | fieldDesc | 对应的label字段(表头显示的label) | | fieldType | 默认为空，若设置为slot,即自定义列 | | width | 默认自适应 | | fixed | 固定列，可选值left/right |

basic-table 事件

| 事件名 | 说明 | 回调参数 | |-----------------|------------------------------------|--------|-----|------| | header-click | 当某一列的表头被点击时会触发该事件 | - | | row-click | 当某一行被点击时会触发该事件 | scope, index | | cell-click | 当某一单元格被点击时会触发该事件 | scope,column, index |

插槽 | 插槽名 | 说明 | |-----------------|------------------------------------ | | item | 某列数据item，需设置fieldType为slot | | empty | 列表为空时的内容 |

使用示例

index.vue

<template>
   <basic-table :columns="columns" :data="tableData">
      <template #item="{column,scope,index}">
	     <view v-if="column.fieldName==='name'">
		    {{scope.name}}
		 </view>
		 <view v-else-if="column.fieldName==='age'">
		 	{{scope.age}}
		 </view>
	  </template>
   </basic-table>
</template>

<script>
import BasicTable from '@/pages/components/basic-table/basic-table.vue';
export default {
	components: { BasicTable },
	data() {
		return {
			tableData: [{ name: '张三', age: 18 }, { name: '李四', age: 22 }],
			columns: [
				{
					fieldName: 'name',
					fieldDesc: '姓名',
					fieldType:'slot'
				},
				{
					fieldName: 'age',
					fieldDesc: '年龄',
					fieldType:'slot'
				}
			]
		};
	},
};
</script>

<style lang="scss"></style>

打赏

如果你觉得本插件，解决了你的问题，可以请作者喝杯咖啡