jeecg-boot前端学习总结（一）

这个控件样式的制作和使用
首先是一个表格

表格行定义

    columns: [
          {
            title: '成员姓名',
            dataIndex: 'name',
            key: 'name',
            width: '20%',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '工号',
            dataIndex: 'workId',
            key: 'workId',
            width: '20%',
            scopedSlots: { customRender: 'workId' }
          },
          {
            title: '所属部门',
            dataIndex: 'department',
            key: 'department',
            width: '40%',
            scopedSlots: { customRender: 'department' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],

然后是插槽遍历

新增成员按钮

在这里插入代码片

  新增成员

新增方法如下

   newMember () {
        this.data.push({                      //数据源 增加一个数组 ，按照key值来，动态使用的时候每次key给+1
          key: '-1',
          name: '',
          workId: '',
          department: '',
          editable: true,                //表示是否可以编辑
          isNew: true                
        })
      },

点击新增按纽的效果

编辑方法

 toggle (key) {
        let target = this.data.filter(item => item.key === key)[0]        //筛选出 数据源 key 等于传入的key的第一个值
        target.editable = !target.editable                       //设置为可编辑
      },

删除方法

 remove (key) {
        const newData = this.data.filter(item => item.key !== key)  //把 传入的key值剔除
        this.data = newData                                      //赋予数据源
      },

添加方法

  saveRow (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
        target.isNew = false
      },

取消方法

 cancel (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
      },