quasar + ts 实现table表格的点击编辑

最新推荐文章于 2024-08-22 10:22:01 发布

jnpgc_

最新推荐文章于 2024-08-22 10:22:01 发布

阅读量969

点赞数

文章标签： Vue Quasar框架表格编辑单元格聚焦 CSS样式

本文链接：https://blog.csdn.net/jnpgc_/article/details/125870878

版权

主要还是使用表格里面的body插槽，可以实现指定列的可编辑

                    <template v-slot:body="props">
                        <q-tr :props="props">
                            <q-td key="nodeId" :props="props" class="demo">
                                <q-input v-model="props.row.nodeId" dense borderless input-style="text-align:center"/>
                            </q-td>
                            <q-td key="roleId" :props="props">{{ props.row.roleId }}</q-td>
                            <q-td key="keyPosition" :props="props">{{ props.row.keyPosition }}</q-td>
                            <q-td key="authorizationType" :props="props">{{ props.row.authorizationType }}</q-td>
                            <q-td key="isDuty" :props="props">
                                <q-select
                                        v-model="props.row.isDuty"
                                        :options="options"
                                        emit-value
                                        map-options
                                        borderless
                                        dense
                                />
                            </q-td>
                            <q-td key="approvalFactor" :props="props">{{ props.row.approvalFactor }}</q-td>
                            <q-td key="operate" :props="props">
                                <q-btn label="删除" color="primary"></q-btn>
                            </q-td>
                        </q-tr>
                    </template>

后面再加点css，让聚焦的单元格改变颜色，

.demo:focus-within {
        background: #e9f0f1;
        border: 1px solid #d5e7d5;
    }