2021-12-10

<edit-form></edit-form> 组件使用的方法

组件样式

功能介绍：

• 通过传入一个 configTemplete 以及双向绑定一个 bindData可以用 input,text,select,checkbox,switch,button进行表格填充，数量种类随意填充。且不同种类会触发不同的事件，并向外暴露不同的事件（附带参数）。
• 由于 bindData 是通过双向绑定的方式传进来的，所以在本组件内改变的同时父组件也会相应变化。
• 点击某行的编辑按钮，会删减所在行，点击添加按钮会在末尾添加一行

配置方式：

      <edit-table
        :configTemplete="config"
        v-model="bindData"
        @inputChange="inputChange" //input的change会触发
        @btnClick="btnClick" // 按钮点击
        @selectChange="loadSelected" //选择框选择事件
        @checkboxChange="checkboxChange" // checkbox改变触发
        @switchChange="switchChange" // switch改变触发>
      </edit-table>

• bindData (数组里面每一个对象代表一行，每个对象里面的每一个属性依次对应一行里面对应的值)

bindData: [
        {
          // bindData数组对象里面的每一个key，和configTemplete里面name值一一对应
          path1: { value: '' }, // value表示input绑定的值
          path2: '控制名称', 
          // options表示下拉框的数据
          path3: { value: '000pp', options: [{ label: '000pp', value: '000pp' }] },
          path4: true,
          path5: true,
          path6: '000', // 按钮的内容，
        },
        {
          path1: { value: '' },
          path2: '控制名称',
          path3: { value: '000pp', options: [{ label: '000pp', value: '000pp' }] },
          path4: true,
          path5: false,
          path6: '000',
        },
      ],

• configTemplete

configTemplete: {
        header: [
          // iconClassaName为element UI组件库的icon类名（非必传）
          { title: '访问路径1', iconClassaName: '' },
          { title: '访问路径2', iconClassaName: 'el-icon-delete' },
          { title: '访问路径3', iconClassaName: '' },
          { title: '访问路径4', iconClassaName: '' },
          { title: '访问路径5', iconClassaName: '' },
          { title: '访问路径6', iconClassaName: 'el-icon-delete' },
        ],

        body: [
           {
            name: 'path1', // name属性名称必须和bindData对象中的key对应
            type: 'input',  //决定渲染input
            placeholder: '必填 例：/',
            checkFun: (v, o) => {
              const { row, key } = o;
              // v表示当前input的值,o表示当前正在输入的input框的位置（row:所在行，key：所在行里对应的key）
              this.bindData[row][key].status = 'error';
              if (!v) {
                this.bindData[row][key].errorMsg = '访问路径不能为空';
              } else if (!/^\/.*$/.test(v)) {
                this.bindData[row][key].errorMsg = '只能是绝对路径';
              } else if (/[\u4e00-\u9fa5]/.test(v)) {
                this.bindData[row][key].errorMsg = '不能包含中文字符';
              } else if (v > 60) {
                this.bindData[row][key].errorMsg = '路径长度不能超过60字符';
              } else {
                this.bindData[row][key].status = '';
                this.bindData[row][key].errorMsg = '';
              }
            },
          },          {
            name: 'path2',
            type: 'text', // 简单文本类型
          },
          {
            name: 'path3',
            type: 'select',

            placeholder: '请选择',
          },
          {
            name: 'path4',
            type: 'checkbox',
            label: '多选框',
          },
          {
            name: 'path5',
            type: 'switch',
          },
          {
            name: 'path6',
            type: 'button',
            btnClass: 'red',  // 支持dao style按钮的类名，可传入多个，类名空格隔开
          },
        ],
      },

触发事件名及参数说明

value:当前的值，{row:行，column：列}, rowNow：当前一行的值

• inputChange (value, {row,column}, rowNow)
• selectChange (value, {row,column}, rowNow)
• checkboxChange (value, {row,column}, rowNow)
• switchChange (value, {row,column}, rowNow)
• btnClick ({row,column}, rowNow)