vue中的增删改查

<template>
  <div>
    <div class="all">
      <div class="btn">
          <el-button type="primary" @click="show">显示</el-button>
          <el-button type="success" @click="isshow = false">隐藏</el-button>
      </div>
      <div v-if="isshow">
        <!-- <code>嵌套搜索滑动置顶</code> -->
          <div class="qiantao">
            <sticky className="sub-navbar">
              <dynamic-form :FormData="FormData" ref="exmp"  :FormOpt="FormOpt">
                <el-button type="primary" @click="sub">生成表单</el-button>
              </dynamic-form>
            </sticky>
            <!-- <pre><code>{{this.FormOpt}}</code></pre> -->
          </div>
        <!-- <code>表单示例</code>
        <dynamic-form :FormData="FormData" ref="exmp"  :FormOpt="FormOpt">
          <el-button type="primary" @click="sub">生成表单</el-button>
          <el-button type="primary" @click="sub">生成表单</el-button>
         </dynamic-form>  -->
      </div>
       <code v-show="em">表格示例
            <el-button type="primary" @click="dialogTableVisible = true" v-waves>自定义设置</el-button>
            <el-button type="primary" @click="add = true">添加</el-button>
            <div class="select">
                <el-input v-model="selectVal" style="width:200px;" placeholder="请输入要查询的内容"></el-input>
                <el-button type="success" @click="selectBtn" round>查询</el-button>
            </div>
        </code>
        <dynamic-table @handleSel="handleSel" :TableOpt="TableOpt" :TableFields="DragTable" style="margin-bottom:30px"></dynamic-table>

        <el-dialog v-el-drag-dialog title="自定义设置" :visible.sync="dialogTableVisible">
            <!-- <el-checkbox
              v-model="TableFields[item.prop]"  v-for="(item, index) in columnList" v-if="item.prop"
              :key="index" style="height:30px">
              &nbsp;{{item.label}}
            </el-checkbox> -->
              <drag-table @handleSel="handleSel1" :DragTable="DragTable"></drag-table>
              <el-button type="primary" @click="sub1">保存</el-button>
        </el-dialog>

         <el-dialog v-el-drag-dialog title="添加用户信息" :visible.sync="add">
            <el-col :span="24">
              <el-form :model="dataForm1" ref="dataForm1" label-width="180px" label-position="center">
                  <el-row>
                      <el-col :span="11">
                        <el-form-item label="ids" >
                          <el-input v-model="dataForm1.id" style="width:200px;" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="姓名" prop="name">
                          <el-input v-model="dataForm1.name" style="width:200px;" placeholder="请输入客户姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="电话" prop="tel">
                          <el-input v-model="dataForm1.tel" style="width:200px;" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                  </el-row>
              </el-form>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="edit = false">取消</el-button>
              <el-button  type="primary" @click="addBtn">添加</el-button>
            </div>
        </el-dialog>

        <el-dialog v-el-drag-dialog title="编辑用户信息" :visible.sync="edit">
           <el-col :span="24">
            <el-form :model="dataForm1" ref="dataForm1" label-width="180px" label-position="center">
                <el-row>
                  <el-col :span="11">
                      <el-form-item label="姓名" prop="name">
                        <el-input v-model="dataForm1.name" style="width:200px;" placeholder="请输入客户姓名"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="11">
                      <el-form-item label="电话" prop="tel">
                        <el-input v-model="dataForm1.tel" style="width:200px;" placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
           </el-col>
          <div slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取消</el-button>
            <el-button  type="primary" @click="editSaveBtn">保存</el-button>
          </div>
        </el-dialog>

    </div>
  </div>
</template>
<script>
import DynamicForm from '@/components/DynamicForm' // 动态表单
import sticky from '@/components/Sticky' // 滑动置顶
import DynamicTable from '@/components/DynamicTable' // 动态表格
import waves from '@/directive/waves' // 水波纹效果
import elDragDialog from '@/directive/el-dragDialog' // 配套表格的可移动的模态框
import DragTable from '@/components/DragTable' // 动态简单表格
// import { udao } from '@/api/index'
export default {
  name: 'exmpIndex',
  components: {
    DynamicForm,
    sticky,
    DynamicTable,
    DragTable
  },
  directives: {
    waves,
    elDragDialog
  },
  created() {
    this.FormOpt.fields = this.fields
    this.FormOpt.rules = this.rules
    this.TableOpt.columnList = this.columnList
    console.log(this.$refs)
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      isshow: false,
      edit: false,
      dialogTableVisible: false,
      add: false,
      em: true,
      selectVal: '',
      // 表单数据
      FormOpt: {
        fields: [],
        formPosition: 'center',
        formInline: true,
        rules: {}
      },
      fields: [
        {
          prop: 'inp1',
          label: '文本框',
          placeholder: '可输入任何',
          type: 'text',
          size: 'mini'
        },
        {
          prop: 'inp2',
          label: '数字框',
          placeholder: '输入数字',
          type: 'number',
          size: 'mini'
        },
        {
          prop: 'inp3',
          label: '密码框',
          placeholder: '输入密码',
          type: 'password',
          size: 'mini'
        },
        {
          prop: 'sel4',
          label: '选择框',
          placeholder: '请选择',
          type: 'select',
          size: 'mini',
          options: {
            idField: 'value',
            nameField: 'label',
            list: [
              { value: '1', label: '梁国乾1' },
              { value: '2', label: '梁国乾2' },
              { value: '3', label: '梁国乾3' },
              { value: '4', label: '梁国乾4' }
            ]
          }
        },
        {
          prop: 'date5',
          label: '单日期选择器',
          placeholder: '选择日期',
          type: 'singleDate',
          size: 'mini'
        },
        {
          prop: 'textarea6',
          label: '文本域',
          placeholder: '文本域',
          type: 'textarea'
        }
      ],
      FormData: {
        inp1: '',
        inp2: '',
        inp3: '',
        sel4: '',
        date5: ''
      },
      rules: {
        inp2: [
          { type: 'number', message: '只能为数字' }
        ],
        inp3: [
          { required: true, trigger: 'change', validator: validatePass }
        ]
      },
      // 编辑
      dataForm1: {
        id: '',
        name: '',
        tel: ''
      },
      // 表格数据
      TableOpt: {
        list: [
          { id: 1, name: '李买呢', tel: '18133807819' },
          { id: 2, name: '1李买', tel: '18133807819' },
          { id: 3, name: '李1', tel: '18133807819' },
          { id: 4, name: '李2', tel: '18133807819' },
          { id: 5, name: '李3', tel: '18133807819' },
          { id: 6, name: '李4', tel: '18133807819' },
          { id: 3, name: '李5', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' },
          { id: 3, name: '李', tel: '18133807819' }
        ],
        columnList: [],
        maxHeight: '80'
      },
      TableFields: {
        id: true,
        name: true,
        tel: true
      },
      columnList: [
        {
          label: 'ID',
          align: 'center',
          prop: 'id'
        },
        {
          label: 'NAME',
          align: 'center',
          prop: 'name'
        },
        {
          label: 'TEL',
          align: 'center',
          prop: 'tel'
        },
        {
          type: 'selection',
          align: 'center',
          width: '55'
        },
        {
          type: 'btn',
          label: '操作',
          width: '150',
          align: 'center',
          operations: [
            {
              btnName: '编辑',
              icon: 'el-icon-edit',
              btnFun: this.cliBtn1,
              type: 'success'
            },
            {
              btnName: '删除',
              icon: 'el-icon-delete',
              btnFun: this.delBtn,
              type: 'danger'
            }
          ]
        }
      ],
      DragTable: {
        fields: {
          id: true,
          name: true,
          tel: true
        },
        list: [
          { field: 'ID', prop: 'id' },
          { field: '姓名', prop: 'name' },
          { field: '电话', prop: 'tel' }
        ]
      }
    }
  },
  methods: {
    sub() {
      console.log(this.$refs.exmp)
      this.FormOpt.fields = this.fields
    },
    handleSel(val) {
      console.log('val:', val)
    },
    show() {
      this.em = false
      this.isshow = true
    },
    // 查找
    selectBtn() {
      const aa = []
      for (const i of this.TableOpt.list) {
        console.log(this.selectVal)
        console.log(222, i.name)
        // console.log(this.TableOpt.list[i])
        if (this.selectVal === i.name) {
          aa.push(i)
        }
        this.TableOpt.list = aa
      }
    },
    // 添加
    addBtn(row, index) {
      console.log(121212, this.dataForm1)
      this.TableOpt.list.push(this.dataForm1)
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      this.add = false
    },
    // 编辑
    cliBtn1(row, index) {
      console.log('我是btn1')
      this.edit = true
      this.dataForm1.id = row.id
      this.dataForm1.name = row.name
      this.dataForm1.tel = row.tel
      console.log('this', this)
      console.log('row:', row)
      console.log('index:', index)
    },
    // 编辑保存
    editSaveBtn() {
      console.log(121212, this.dataForm1.id)
      console.log(1111, this.TableOpt.list)
      for (const i of this.TableOpt.list) {
        if (i.id === this.dataForm1.id) {
          console.log(i.id)
          i.name = this.dataForm1.name
          i.tel = this.dataForm1.tel
        }
      }
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      this.edit = false
    },
    // 删除
    delBtn(row, index) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const inf = this.TableOpt.list.splice(index, 1)
        // await udao(del, cust)
        console.log('5555', inf)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    sub1() {
      // console.log(Object.keys(this.DragTable.fields))
      // for (const i of this.selVal) {
      // for (const iterator of Object.keys(this.DragTable.fields)) {
      // if (iterator === i.prop) {
      // console.log('我是相等的')
      // console.log(this.DragTable.fields[iterator])
      // this.DragTable.fields[iterator] = true
      // this.dialogTableVisible = false
      // } else {
      // console.log('我是不相等的')
      // this.DragTable.fields[iterator] = false
      // }
      // }
      // if (this.DragTable.fields === i.prop) {
      //   console.log(this.DragTable.fields[i.prop])
      //   this.DragTable.fields[i.prop] = true
      // } else {
      //   this.DragTable.fields[i.prop] = false
      // }
      // }
      for (const iterator of Object.keys(this.DragTable.fields)) {
        this.DragTable.fields[iterator] = false
        for (const i of this.selVal) {
          if (i.prop === iterator) {
            this.DragTable.fields[i.prop] = true
            this.dialogTableVisible = false
          }
        }
      }
      this.dialogTableVisible = false
      // console.log('什么事都没有')
    },
    handleSel1(val) {
      // console.log('val:', val)
      this.selVal = val
    }
  }
}
</script>

<style lang="scss" scoped>
code{
  width: 100%;
  // margin: 20px auto;
  border-radius: 20px;

}
.all{
  width: 80%;
  margin: 0 auto;
  .btn{
    margin:10px 0;
  }
  .select{
    display: inline;
    // float: right;
  }
  .qiantao{
    height: 150px;
    // border: 1px solid red;
    // overflow: scroll;
  }
}
</style>

里面的import是另外写好的组件，请仔细查看