<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)
