edit-cell-button v0.0.1

实时编辑表格

demo演示

:::demo

    <template>
    	<div>
			<!-- 文本 -->
			<el-checkbox v-model="isCanEmpty">
				开启文本空校验
			</el-checkbox>
			<el-checkbox v-model="isEditAble" @change="handleTableCellFocus">
				文本框聚焦并选中
			</el-checkbox>
			<div style="display:flex;margin-top:10px">
				<div>
					<edit-cell-button
						style="width:260px;"
						type="input"
						ref="text"
						:isCanEmpty="isCanEmpty"
						:value.sync="textValue" 
						:editable="true" 
						@input="(e) => updateCell(e)"
					>
					</edit-cell-button> 
				</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectValue:1, 
            isCanEmpty: false,
            isEditAble: true,
            checked: false,
            textValue: '纯文本',
            options: [
                {
                    value: 0,
                    label: "选择框值1"
                },
                {
                    value: 1,
                    label: "选择框值2"
                },
                {
                    value: 3,
                    label: "选择框值3"
                }
            ],
        };
    },
    mounted(){
    },
    methods: {
		updateCell(e){
			console.log(e)
		},
		// 聚焦选中的方法
        handleTableCellFocus(e){
            if(e){
                if(this.$refs.text && (typeof this.$refs.text.focusAndSelected) === 'function'){
                    this.$refs.text.focusAndSelected();
                }
            }
        }
    },
};
</script>
:::  

## 依赖
- Vue 2.0.0+
- ElementUI
## 示例
- 安装

  ```code
  npm i edit-cell -S --registry http://10.246.196.12:4873/

• HTML部分

      <div>
  				<!-- 文本 -->
  				<div style="display:flex;margin-top:10px">
  					<div>
  						<edit-cell 
  							style="width:260px;"
  							type="input"
  							ref="text"
  							:isCanEmpty="isCanEmpty"
  							:value.sync="textValue" 
  							:editable="true" 
  							@input="(e) => updateCell(e)"
  						>
  						</edit-cell> 
  					</div>
  				<div style="margin-left:10px">
  					<edit-cell 
  						style="height: 100%;width:300px"
  						type="select"
  						filterable
  						:options="options"
  						:value.sync="selectValue" 
  						:editable="true" 
  						@change="(e) => updateCell(e)"
  					>
  					</edit-cell> 
  				</div>
      </div>
  </div>

• JS部分

  		<script>
      import CellEdit from 'cell-edit'
  			export default {
      components: {
  				CellEdit,
  			},
  			data() {
          return {
              selectValue: 1, 
              isCanEmpty: false,
              isEditAble: true,
              textValue: '纯文本',
              options: [
                  {
                      value: 0,
                      label: "选择框值1"
                  },
                  {
                      value: 1,
                      label: "选择框值2"
                  },
                  {
                      value: 3,
                      label: "选择框值3"
                  }
              ],
          };
      },
      mounted(){
      },
      methods: {
          updateCell(e){
              console.log(e)
          },
          // 聚焦选中的方法
          handleTableCellFocus(e){
              if(e){
                  if(this.$refs.text && (typeof this.$refs.text.focusAndSelected) === 'function'){
                      this.$refs.text.focusAndSelected();
                  }
              }
          }
      },
  		}
  </script>

参数

方法：