avue-crud 可编辑

参考官方文档:
  配置【数据中 $cellEdit为true】即可开启首次编辑addRowBtn为行新增按钮,cellBtn设置为true则开启行编辑按钮,在配置中将【编辑的字段设置 cell为true】,增删改查方法和crud组件使用一致,rowKey为主键的key,如果数据中存在主键,数据才会保存在表格中。

个人实验下来,只有两步
  1、Json数据中每个元素加上:$cellEdit:true
如:

{
   id:0,
   sex:1,
   age:18,
   $cellEdit:true // 可编辑
},{
   id:1,
   name:'李四',
   age:18,
   sex:0,	// 不可编辑
}

  2、option 中的 column,在想要编辑的字段加上:cell: true,

column: [{
            label:'姓名',
            prop: 'name',
            cell: true, // 设为true
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
        }]

  问题来了,后端传来的json怎么办?如何在每个json元素中加上$cellEdit:true
  可以利用forEach

res.data.gssalSalPodelayanDtla.forEach((item) => {
  item.$cellEdit = true
})

如此 res.data.gssalSalPodelayanDtla 中的每一个元素就多了$cellEdit:true

你可能感兴趣的:(avue,vue,javascript,html5)