更新记录

1.0.1（2026-01-13） 下载此版本

优化使用文档

1.0.0（2026-01-13） 下载此版本

可拖拽弹窗、图片裁剪、通过数据渲染的表格

平台兼容性

uni-app(4.87)

uni-app x(4.87)

shuai-ui-vue3

可拖拽弹窗、图片裁剪、通过数据渲染的表格

shuai-table

通过数据渲染的表格

props

• columns 说明
  1. fieldName 对应data中的键名
  2. headerName data中对应数据的表头
  3. align 文字对齐方式 可选值： center left right
  4. width 单元格的宽度
  5. fixed 单元格固定在左边还是右边 可选值 left right
  6. headerStyle 表头样式
  7. style 单元格样式

• formatterInfo 说明

  formatterInfo 对象的键名对照columns中的 fieldName

  const formatterInfo = ref({
  info: (row, rowIndex) => {
  return `${row.sex}_${row.name}_${row.age}`
  }
  })

  cellStyle cellClass rowStyle rowClass
  给行设置背景颜色 和字体颜色不会生效，应为单元格有自己的样式不会继承行的样式

  
  function cellStyleCall(rowIndex, cellIndex) {
  if (rowIndex == 1 && cellIndex == 1) {
  return {
  color: "red"
  }
  } else if (rowIndex == 0 && cellIndex == 1) {
  return {
  color: "blue"
  }
  }
  }
  function cellCalssCall(rowIndex, cellIndex){
  if (rowIndex == 1 && cellIndex == 1) {
  return 'warning'
  } else if (rowIndex == 0 && cellIndex == 1) {
  return "succeed"
  }
  }
  function rowClassCall(rowIndex) {
  if (rowIndex == 1) {
  return "error"
  }
  }
  function rowStyleCall(rowIndex) {
  if (rowIndex == 1) {
  return {

  }

  } }

  
  ### 事件

• selectChange

  funtion ({selection:[],row:{}}) => void 当用户手动勾选数据行时触发的事件
  全选单选多选都会触发
  selection 选中的数据 单选时返回一个只有一个行数据的数组 row 点击操作的行 row为undefined

  • rowClick

    点击行时触发的事件
    funtion ({row:{},rowIndx:0}) => void

  • cellClick

    funtion ({}:option) => void 点击单元格时触发的事件
    option.row 单元格所在行的行数据
    option.rowIndex 单元格所在行的行索引
    option.cellIndex 单元格所在单元格索引
    option.fieldName 单元格所在对应data中的键名
    option.value 单元格的值 通过插槽处理的 为undefined

  暴露的方法

  • checkSingle(rowIndex)

    指定行的选中与取消选中 状态的切换

插槽

对应columns中的 fieldName

<shuai-table radio :data="dataList" :columns="columns" @selectChange='tableSelect' @rowClick='rowClickFn'
@cellClick='cellClickFn' :formatterInfo='formatterInfo'>
<template #info2={row,rowIndex}>
{{`${row.age}_${row.name}_${row.sex}`}}
</template>
<template #operation={row,rowIndex}>
<button size="mini" @tap='edit(row,rowIndex)'>修改</button>
</template>
</shuai-table>

const columns = ref([
{
fieldName: 'info2',
headerName: '详情2',
width: "200",
}, {
fieldName: 'operation',
headerName: '操作',
align: "center",
width: "200",
fixed: "right",
headerStyle:{}
}
])

完整代码示例

<template>
    <view class="content">
        <shuai-table ref="tableRef"  selection :data="dataList" 
        :columns="columns" @selectChange='tableSelect' @rowClick='rowClickFn' 
        :cell-calss="cellCalssCall" :cell-style="cellStyleCall" 
        :row-style="rowStyleCall" :row-class="rowClassCall"
        @cellClick='cellClickFn' :formatterInfo='formatterInfo'>
            <template #info2={row,rowIndex}>
                {{`${row.age}_${row.name}_${row.sex}`}}
            </template>
            <template #operation={row,rowIndex}>
                <button size="mini">修改</button>
            </template>
        </shuai-table>

        <button size="mini" @tap="toggleSelection">选中第1条数据</button>
    </view>
</template>

<script setup>
    import {
        ref
    } from "vue"
    const tableRef= ref()
    const dataList = ref([{
        name: "张三",
        age: '18',
        sex: "男"
    }, {
        name: "李四",
        age: '18',
        sex: "男",
        disabled: true
    }])

    const columns = ref([{
        fieldName: 'name',
        headerName: '姓名',
        align: "center",
        width: "100",
        fixed: "left"
    }, {
        fieldName: 'age',
        headerName: '年龄',
        width: "100",
        align: "left",
        fixed: "right",
    }, {
        fieldName: 'sex',
        headerName: '性别',
        width: "100",
        align: "right",
        fixed: "left"
    }, {
        fieldName: 'info',
        headerName: '详情',
        width: "200",
    }, {
        fieldName: 'info2',
        headerName: '详情2',
        width: "200",
    }, {
        fieldName: 'operation',
        headerName: '操作',
        align: "center",
        width: "200",
        fixed: "right",
        headerStyle:{}
    }])
    const formatterInfo = ref({
        info: (row, rowIndex) => {
            return `${row.sex}_${row.name}_${row.age}`
        }
    })
    function cellStyleCall(rowIndex, cellIndex) {
        if (rowIndex == 1 && cellIndex == 1) {
            return {
                color: "red"
            }
        } else if (rowIndex == 0 && cellIndex == 1) {
            return {
                color: "blue"
            }
        }
    }
    function cellCalssCall(rowIndex, cellIndex){
        if (rowIndex == 1 && cellIndex == 1) {
            return 'warning'
        } else if (rowIndex == 0 && cellIndex == 1) {
            return "succeed"
        }
    }
    function rowClassCall(rowIndex) {
        if (rowIndex == 1) {
            return "error"
        }
    }
    function rowStyleCall(rowIndex) {
        if (rowIndex == 1) {
            return {

            }
        }
    }
    function tableSelect(rows) {
        console.log(rows)
    }

    function rowClickFn(e) {
        console.log(e)
    }

    function cellClickFn(e) {
        console.log(e)
    }

    function toggleSelection(){
        tableRef.value.checkSingle(0)
    }
</script>

<style scoped>
    .content {

        padding: 30rpx;
    }
    .content>button{
        margin-top: 20px;
    }
</style>

shuai-drag-popup

可拖拽的弹出层

props

事件

• close

  弹出层关闭时触发

  暴露的方法

  • open({x:0,y:0})

    打开弹出层 入参为弹出层中心点的坐标 不传参默认出现在屏幕中间

  • close()

    关闭弹出层

    shuai-image-cropping

    通过cnvas实现的图片裁剪组件，支持移动图片位置，放大缩小图片

    props

    prop	默认值	描述
    width	600	裁剪框的宽度
    height	400	裁剪框的高度
    src	图片地址	可以是网络图片路径,临时文件路径

  暴露的方法

  • getImagePath({base64:"",tempFilePath:''})

    base64:图片的base64资源
    tempFilePath:图片的临时路径，h5环境下tempFilePath是base64