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

組件樣式

功能介紹：

• 通過(guò)傳入一個(gè) configTemplete 以及雙向綁定一個(gè) bindData可以用 input,text,select,checkbox,switch,button進(jìn)行表格填充，數(shù)量種類(lèi)隨意填充。且不同種類(lèi)會(huì)觸發(fā)不同的事件，并向外暴露不同的事件（附帶參數(shù)）。
• 由于 bindData 是通過(guò)雙向綁定的方式傳進(jìn)來(lái)的，所以在本組件內(nèi)改變的同時(shí)父組件也會(huì)相應(yīng)變化。
• 點(diǎn)擊某行的編輯按鈕，會(huì)刪減所在行，點(diǎn)擊添加按鈕會(huì)在末尾添加一行

配置方式：

      <edit-table
        :configTemplete="config"
        v-model="bindData"
        @inputChange="inputChange" //input的change會(huì)觸發(fā)
        @btnClick="btnClick" // 按鈕點(diǎn)擊
        @selectChange="loadSelected" //選擇框選擇事件
        @checkboxChange="checkboxChange" // checkbox改變觸發(fā)
        @switchChange="switchChange" // switch改變觸發(fā)>
      </edit-table>

• bindData (數(shù)組里面每一個(gè)對(duì)象代表一行，每個(gè)對(duì)象里面的每一個(gè)屬性依次對(duì)應(yīng)一行里面對(duì)應(yīng)的值)

bindData: [
        {
          // bindData數(shù)組對(duì)象里面的每一個(gè)key，和configTemplete里面name值一一對(duì)應(yīng)
          path1: { value: '' }, // value表示input綁定的值
          path2: '控制名稱(chēng)', 
          // options表示下拉框的數(shù)據(jù)
          path3: { value: '000pp', options: [{ label: '000pp', value: '000pp' }] },
          path4: true,
          path5: true,
          path6: '000', // 按鈕的內(nèi)容，
        },
        {
          path1: { value: '' },
          path2: '控制名稱(chēng)',
          path3: { value: '000pp', options: [{ label: '000pp', value: '000pp' }] },
          path4: true,
          path5: false,
          path6: '000',
        },
      ],

• configTemplete

configTemplete: {
        header: [
          // iconClassaName為element UI組件庫(kù)的icon類(lèi)名（非必傳）
          { title: '訪問(wèn)路徑1', iconClassaName: '' },
          { title: '訪問(wèn)路徑2', iconClassaName: 'el-icon-delete' },
          { title: '訪問(wèn)路徑3', iconClassaName: '' },
          { title: '訪問(wèn)路徑4', iconClassaName: '' },
          { title: '訪問(wèn)路徑5', iconClassaName: '' },
          { title: '訪問(wèn)路徑6', iconClassaName: 'el-icon-delete' },
        ],

        body: [
           {
            name: 'path1', // name屬性名稱(chēng)必須和bindData對(duì)象中的key對(duì)應(yīng)
            type: 'input',  //決定渲染input
            placeholder: '必填 例：/',
            checkFun: (v, o) => {
              const { row, key } = o;
              // v表示當(dāng)前input的值,o表示當(dāng)前正在輸入的input框的位置（row:所在行，key：所在行里對(duì)應(yīng)的key）
              this.bindData[row][key].status = 'error';
              if (!v) {
                this.bindData[row][key].errorMsg = '訪問(wèn)路徑不能為空';
              } else if (!/^\/.*$/.test(v)) {
                this.bindData[row][key].errorMsg = '只能是絕對(duì)路徑';
              } else if (/[\u4e00-\u9fa5]/.test(v)) {
                this.bindData[row][key].errorMsg = '不能包含中文字符';
              } else if (v > 60) {
                this.bindData[row][key].errorMsg = '路徑長(zhǎng)度不能超過(guò)60字符';
              } else {
                this.bindData[row][key].status = '';
                this.bindData[row][key].errorMsg = '';
              }
            },
          },          {
            name: 'path2',
            type: 'text', // 簡(jiǎn)單文本類(lèi)型
          },
          {
            name: 'path3',
            type: 'select',

            placeholder: '請(qǐng)選擇',
          },
          {
            name: 'path4',
            type: 'checkbox',
            label: '多選框',
          },
          {
            name: 'path5',
            type: 'switch',
          },
          {
            name: 'path6',
            type: 'button',
            btnClass: 'red',  // 支持dao style按鈕的類(lèi)名，可傳入多個(gè)，類(lèi)名空格隔開(kāi)
          },
        ],
      },

觸發(fā)事件名及參數(shù)說(shuō)明

value:當(dāng)前的值，{row:行，column：列}, rowNow：當(dāng)前一行的值

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