v-field

🖍A Vue.js directive for dynamic input

<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
<template slot-scope="{row}">
<span v-field="{value: () => row.date, input: v => row.date = v}">{{ row.date }}<span>
</template>
</el-table-column>
</el-table>

Installation

npm i --save v-field

import Vue from 'vue';
import VField from 'v-field';
Vue.use(VField, directiveName); // default directiveName = 'field'

Playground on the Web

https://codesandbox.io/s/v-field-hh8g2 (interactive playground with webpack and ESM)

Options

<span
v-field="{
event: 'click', // dblclick
nodeName: 'TD', // TH
value: () => row.date, input: val => row.date = val,
disabled: () => false, inputClass: 'v-field',
inputType: 'text',
}"
>
{{ row.date }}
<span>

you can set defaultOptions

import VField from 'v-field';
VField.defaultOptions.event = 'dblclick';
VField.defaultOptions.nodeName = 'TH';