buildadmin表格自定义switch开关

最新推荐文章于 2024-08-10 08:32:26 发布

‌

最新推荐文章于 2024-08-10 08:32:26 发布

阅读量715

点赞数 1

分类专栏： builadmin 文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/qq_39337264/article/details/128562756

版权

builadmin 专栏收录该内容

3 篇文章

订阅专栏

父组件通过自定义单元格渲染引入子组件，进行数据传递以及事件绑定

<script setup lang="ts">
    import baTableClass from '/@/utils/baTable'
    import { baTableApi } from '/@/api/common'
    import Table from '/@/components/table/index.vue'
    import Foo from './components/switch.vue'
    const tableRef = ref()
    const renderId = {
        render(context: TableRenderPublicInstance) {
            // 使用vue组件定义进行渲染（导入的组件）
            return h(Foo, {
                onClick: () => {
                    // 点击事件回调处理 比如可以在这里请求接口

                    // 回调完成刷新当前表格数据
                    // baTable.onTableAction('com-search')
                }
            }, {
                default: () => context.$attrs.renderRow.switch
            })
        },
    }
    const baTable = new baTableClass(new baTableApi('/admin/'), {
        pk: 'id',
        column: [{
            label: '状态',
            prop: 'status',
            align: 'center',
            render: 'customRender',
            customRender: markRaw(renderId),
            sortable: false
        }]
    }
    provide('baTable', baTable)
    onMounted(() => {
        baTable.table.ref = tableRef.value
        baTable.mount()
        baTable.getIndex()?.then(() => {
            baTable.initSort()
            baTable.dragSort()
        })
    })
</script>

子组件进行默认值绑定，状态改变

<template>
    <el-switch
        :model-value="props.renderRow.switch"
        class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
        inline-prompt
        active-text="已处理"
        inactive-text="待处理"
        :active-value="1"
        :inactive-value="0"
      />
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
}
const props = defineProps<Props>()

</script>

<style scoped lang="scss">
    ::v-deep .el-switch__core {
        width: 68px;
    }
</style>

最终实现效果：点击更新状态并刷新当前表格数据