layui-vue3表格table操作示例代码
代码语言:html
所属分类:表格
代码描述:layui-vue3表格table操作示例代码,包含分页、排序、批量删除、操作、打印、下载excel表格等功能。
代码标签: layui-vue3 表格 table 操作 示例 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 layui-vue 样式 --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui-vue-umd.css"> <!-- 引入 Vue 3, 使用全局变量 Vue --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.2.33.js"></script> <!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui-vue-umd.js"></script> </head> <body> <div id="app"> <lay-layer v-model="visible11" :area="['500px', '660px']"> <div style="padding: 20px;"> <lay-form :model="model11" ref="layFormRef11" required> <lay-form-item label="账户" prop="name"> <lay-input v-model="model11.name"></lay-input> </lay-form-item> <lay-form-item label="状态" prop="status" mode="inline"> <lay-switch v-model="model11.status"></lay-switch> </lay-form-item> <lay-form-item label="邮箱" prop="email"> <lay-input v-model="model11.email" ></lay-input> </lay-form-item> <lay-form-item label="城市" prop="city"> <lay-input v-model="model11.city" ></lay-input> </lay-form-item> <lay-form-item label="爱好" prop="hobby"> <lay-select v-model="model11.hobby" multiple style="width:100%;"> <lay-select-option value="画画" label="画画"></lay-select-option> <lay-select-option value="唱歌" label="唱歌"></lay-select-option> </lay-select> </lay-form-item> <lay-form-item label="时间" prop="joinTime"> <lay-date-picker v-model="model11.joinTime" placeholder=""></lay-date-picker> </lay-form-item> <lay-form-item label="特长" prop="sex"> <lay-radio v-model="model11.sex" name="specialty" value="1">男</lay-radio> <lay-radio v-model="model11.sex" name="specialty" value="2">女</lay-radio> </lay-form-item> <lay-form-item label="描述" prop="remark"> <lay-textarea placeholder="请输入描述" v-model="model11.remark"></lay-textarea> </lay-form-item> <lay-form-item style="text-align: center;"> <lay-button type="primary" @click="submit">提交</lay-button> <lay-button type="default" @click="reset11">重置</lay-button> </lay-form-item> </lay-form> </div> </lay-layer> <lay-table :page="page" :height="'300px'" :columns="columns" :loading="loading" :default-toolbar="true" :data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change" @sortChange="sortChange"> <template #status="{ row }"> <lay-switch :model-value="row.status" @change="changeStatus($event , row)"></lay-switch> </template> <template v-slot:toolbar> <lay-button size="sm" type="primary" @click="add">新增</lay-button> <lay-button size="sm" @click="remove">删除</lay-button> </template> <template v-slot:operator="{ row }"> <lay-button size="xs" type="primary" @click="edit(row)">编辑</lay-button> <lay-button size="xs" @click="remove">查看</lay-button> </template> </lay-table> </div> <script> const { createApp, watch,ref,reactive } = Vue; const { layer } = LayuiVue; const App = { setup() { const loading = ref(false); const selectedKeys = ref([]); const page = reactive({ current: 1, limit: 10, total: 100 }); const model11 = reactive({ username: "admin" }) const layFormRef11 = ref(); const visible11 = ref(false); const columns = ref([ { title:"选项", width: "55px", type: "checkbox", fixed: "left" }, { title:"编号", width: "80px", key:"id", fixed: "left", sort: "desc" }, { title:"姓名", width: "80px", key:"name", sort: "desc" }, { title:"状态", width: "80px", key:"status", customSlot: "status"}, { title:"邮箱", width: "120px", key:"email" }, { title:"性别", width: "80px", key:"sex" }, { title:"年龄", width: "80px", key:"age" }, { title:"城市", width: "120px", key:"city" }, { title:"签名", width: "260px", key:"remark" }, { title:"隐藏", width: "260px", key:"hide", hide: true }, { title:"时间", width: "120px", key:"joinTime" }, { title:".........完整代码请登录后点击上方下载按钮下载查看
网友评论0