# 基础功能

代码

配置项建议写在js文件中，方便阅读。

代码

# 明细表的顶部按钮工具栏

  1. 在配置文件中加入buttonListRightTop这个属性，需要给一个json对象的数组。 例如：

     {
    label: "新建",
    action: "addRow",
    icon: "el-icon-plus",
    type: "primary",
  },
label 按钮的文字描述
action 点击的动作命令区分
type elementui按钮类型
icon 仅支持elementui的icon图标，以el开头
tickData 是否返回勾选的数据，默认不返回，配合checkbox 一起使用。

  1. 表格最左侧是否需要checkbox勾选框

    checkbox: true,

  2. 可以通过调用子组件方法的方式实现批量删除功能

    this.$refs.detailList.deleteRow(row);

  3. 可以通过调用子组件方法的方式实现新增一条数据

    this.$refs.detailList.addRow();

  4. @buttonEvent 事件可以监听工具栏中所有按钮的单击事件，通过action做区分。

     //顶部操作栏按钮的单击事件监听函数
 buttonEvent({ row, action }) {
   switch (action) {
     case 'addRow':
       //新建
       this.$refs.detailList.addRow();
       break;
     case 'batchDeleteRow':
       //批量删除
       this.$refs.detailList.deleteRow(row);
       console.log('需要批量删除的数据是:=>', row);
       break;
   }
   console.log('row=>', row);
   console.log('action=>', action);
 },

  5. 配置批量删除按钮, 需要tickData属性为true。

     {
   label: "批量删除",
   action: "batchDeleteRow",
   icon: "el-icon-delete",
   type: "danger",
   tickData: true
 }

# 功能演示


代码

配置数据如下所示：
代码

# 明细表设置标题

 titleDetail: '明细表标题',

# 明细表设置行号

 rowNumber: true,

将rowNumber设置为false，可以隐藏行号一列，如下所示。

# 功能演示


代码

mock数据如下所示：
代码

# 明细表设置icon按钮

在js配置文件中：

  detailListHeader: [
    {
      title: "icon",
      type: 18,
      field: "icon",
    }
  ],
  //图标按钮配置
  iconData: {
    icon: [
      {
        icon: "edit",
        action: "editCommand",
      },
      {
        icon: "del",
        action: "delCommand",
      }
    ]
  },

@fieldClick="fieldClick" 接收一个事件

  //图标按钮的单击事件
  fieldClick({ action, index, row }) {
    switch (action) {
      case "editCommand":
        break;
      case "delCommand":
        break;
    }
  },

# 功能演示


代码

mock数据如下所示：
代码

← 字段禁用与必填 →