vue3+element-plus

最新推荐文章于 2024-07-29 11:53:27 发布
少年包青菜
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量1k
点赞数 1
文章标签： javascript
本文链接：https://blog.csdn.net/m0_50884068/article/details/125717070
版权
vue3+element-plus
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
    <title>test</title>
</head>
<body>
    <div id="app">
        <el-form label-width="120px" :inline="true">
            <el-form-item label="姓名">
              <el-input v-model="queryName" @change="wachBtn" clearable  style="width:400px" />   
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="queryBtn">查询</el-button>
                <el-button type="success" @click="isedit=true">新增</el-button>
            </el-form-item>
          </el-form>
        
        <el-table :data="TableData" style="width: 100%">
            <el-table-column
                v-for="(item,index) of Table" 
                :key="item.key"
                :label="item.TableName"
                :prop="item.key"
                align="center"
            >
            <template v-slot="scope">
                <div v-if="item.key==='edit'">
                    <el-button type="primary" @click="editBtn(scope.row)">修改</el-button>
                    <el-button type="danger" @click="removeBtn(scope.row)">删除</el-button>
                </div>
                <div v-else>{{scope.row[item.key]}}</div>
            </template>
            </el-table-column>
          </el-table>
          <!-- 弹框 -->
          <el-dialog v-model="isedit" :title="form.name==null?'新增':'修改'">
            <el-form :model="form" label-width="120px">
              <el-form-item label="姓名" :rules="[{required: true,message: '姓名必填',trigger: 'blur' }]">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="性别" :rules="[{required: true,message: '性别必填',trigger: 'blur' }]">
                <el-radio-group v-model="gender" class="ml-4">
                  <el-radio label="男" size="large">男</el-radio>
                  <el-radio label="女" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="年龄" :rules="[{required: true,message: '年龄必填',trigger: 'blur' }]">
                <el-input v-model="form.age" />
              </el-form-item>
              <el-form-item label="绝招" :rules="[{required: true,message: '绝招必填',trigger: 'blur' }]">
                <el-input v-model="form.skill" />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="wuBtn">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button
                >
              </span>
            </template>
          </el-dialog>
      </div>
      <script>
    const vue3Composition = {
      setup() {
        // 表头
        const Table=Vue.ref([
            {key:'name',TableName:'名字'},
            {key:'gender',TableName:'性别'},
            {key:'age',TableName:'年龄'},
            {key:'skill',TableName:'我是你爹'},
            {key:'edit',TableName:'操作'},
        ])
        const TableData=Vue.ref([{
            id:1,
                name:'路飞',
                gender:'男',
                age:20,
                skill:'猿王枪'
            }])
        Vue.onMounted(() => {
          localStorage.setItem('list',JSON.stringify(TableData.value))
          TableData.value= JSON.parse(localStorage.getItem('list'))
        })
        // 弹框
        const isedit=Vue.ref(false)
        // 男女
        const gender = Vue.ref('男')
        const id=Vue.ref(null)
        const form =Vue.ref({
            name: null,
            age: null,
            skill: null,
        })
        // 确定
        const submit=()=>{
            if(form.value.name==null || form.value.age==null || form.value.skill==null) return alert('请输入完整信息')
            if(id.value!=null){
                for(let item of TableData.value){
                    if(item.id==id.value){
                        console.log(item);
                        item.name=form.value.name
                        item.gender=gender.value
                        item.age=form.value.age
                        item.skill=form.value.skill
                        break
                    }
                }
            }else{
                TableData.value.push({
                    id:TableData.value.length+1,
                    name:form.value.name,
                    gender:gender.value,
                    age:form.value.age,
                    skill:form.value.skill
                })
                id.value=null
            }
            isedit.value=false
            form.value.name=null
            form.value.age=null
            form.value.skill=null
            localStorage.setItem('list',JSON.stringify(TableData.value))
        }
        // 取消弹框
        const wuBtn=()=>{
            isedit.value=false
            form.value.name=null
            form.value.age=null
            form.value.skill=null
        }
        
        // 查看
        const queryName=Vue.ref('')
        const wachBtn=()=>{ // 监听输入框
            if(queryName.value===''){
                TableData.value=JSON.parse(localStorage.getItem('list'))
            }
        }
        const queryBtn=()=>{ // 查看
            const arrItem=[]
            TableData.value.filter(item=>{
                if(item.name===queryName.value){
                    arrItem.push(item)
                }
            })
            TableData.value=arrItem
        }
        // 修改
        const editBtn=(row)=>{
            id.value=row.id
            form.value.name=row.name
            form.value.age=row.age
            form.value.skill=row.skill
            isedit.value=true
        }
        // 删除
        const removeBtn=(row)=>{
            TableData.value=TableData.value.filter(item=>item.id!==row.id)
            localStorage.setItem('list',JSON.stringify(TableData.value))
        }
        return {
            TableData,
            Table,
            isedit,
            form,
            gender,
            submit,
            wuBtn,
            wachBtn,
            queryName,
            queryBtn,
            editBtn,
            removeBtn,
        }
      }
    }
    const vm = Vue.createApp(vue3Composition)
      .use(ElementPlus)
      .mount('#app')
      </script>
</body>
</html>