layui-vue3表格table增删改查操作示例代码-html代码-BFW代码库

代码语言：html
所属分类：表格
代码描述：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" :title="isedit?'编辑':'新增'" :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="age">
                        <lay-input-number v-model="model11.age" :step="1"></lay-input-number>
                    </lay-form-item>
                    <lay-form-item label="性别" prop="sex">
                        <lay-radio v-model="model11.sex" name="specialty" value="男">男</lay-radio>
                        <lay-radio v-model="model11.sex" name="specialty" value="女">女</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="submit11">提交</lay-button>
                        <lay-button type="default" @click="reset11">重置</lay-button>
                    </lay-form-item>
                </lay-form>
            </div>
        </lay-layer>


        <lay-table :page="page" :height="'400px'" :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>
                <div style="display:flex;">
                     <lay-button size="sm" type="primary" @click="add">    <lay-icon type="layui-icon-add-circle"></lay-icon> </lay-button>
                     <lay-button size="sm" @click="remove"> <lay-icon type="layui-icon-delete"></lay-icon></lay-button>
                    <lay-input  prefix-icon="layui-icon-search"   size="sm" v-model="searchkey" placeholder="输入关键字 "></lay-input>
                    <lay-button   size="sm" type="primary" @click="search" style="margin-right:30%;">搜索</lay-button>
      
                    
                </div>

    </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,
         toRefs
     } = Vue;
     const {
         layer
     } = LayuiVue;
     const App = {

         setup() {
             const isedit = ref(false);

             const loading = ref(false);

             const selectedKeys = ref([]);

             const page = reactive({
                 current: 1,
                 limit: 10,
                 total: 100
             });
             const model11 = reactive({

             })
             const searchkey = ref("");
             const editid = ref("");

             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: "操作",
                     width: "150px",
                     customSlot: "operator",
                     key: "operator",
                     fixed: "right"
                 }
             ]);

             const change = (page) => {
                 loading.value = true;
                 setTimeout(() => {
                     dataSource.value = loadDataSource(page.current, page.limit);
                     loading.value = false;
                 }, 1000);
             }

             const sortChange = (key, sort) => {
                 layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
             }

             const dataSource = ref([{
                     id: "1",
                     name: "张三1",
                     email: "test@qq.com",
                     sex: "男",
                     city: "浙江杭州",
                     age: "18",
                     remark: '花开堪折直须折,莫待无花空折枝.',
                     joinTime: "2022-02-09",
                     status: true
                 },
                 {
                     id: "2",
                     name: "张三2",
                     email: "test@qq.com",
                     sex: "男",
                     city: "浙江杭州",
                     age: "20",
                     remark: '花开堪折直须折,莫待无花空折枝.',
                     joinTime: "2022-02-09",
                     status: true
                 },
                 {
                     id: "3",
                     name: "张三3",
                     email: "test@qq.com",
                     sex: "男&qu.........完整代码请登录后点击上方下载按钮下载查看