vue+element-ui+vue-ele-editable实现多种元素变成可编辑模式效果代码-html代码-BFW代码库

代码语言：html

代码描述：vue+element-ui+vue-ele-editable实现多种元素变成可编辑模式效果代码，支持单行多行文本、时间选择、颜色、多选、单选、开关、上传图片等类型。

代码标签： vue element-ui vue-ele-editable 元编辑模式

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">

</head>

<body translate="no" >
  <div id="app">
    <div style="margin: 100px auto;max-width: 1200px;">
    <h1 style="text-align: center">vue-ele-editable</h1>
    <h2>类型演示:</h2>
    <el-table
      :data="tableData"
      border
      stripe
    >
      <el-table-column
        label="类型"
        prop="type"
        width="160"
      ></el-table-column>
      <el-table-column
        label="含义"
        prop="desc"
        width="400"
      ></el-table-column>
      <el-table-column
        label="演示(popover模式)"
        prop="popover"
      >
        <template slot-scope="scope">
          <ele-editable
            :custom-attrs="scope.row.popover.customAttrs"
            :field="scope.row.type"
            :isNoWrapper="scope.row.popover.isNoWrapper"
            :options="scope.row.popover.options"
            :request-fn="handleChange"
            :title="scope.row.type"
            :type="scope.row.type"
            v-model="scope.row.popover.data"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="演示(inline模式)"
        prop="inline"
      >
        <template slot-scope="scope">
          <ele-editable
            :custom-attrs="scope.row.inline.customAttrs"
            :field="scope.row.type"
            :inline="true"
            :isNoWrapper="scope.row.inline.isNoWrapper"
            :options="scope.row.inline.options"
            :request-fn="handleChange"
            :title="scope.row.type"
            :type="scope.row.type"
            v-model="scope.row.inline.data"
          />
        </template>
      </el-table-column>
    </el-table>

    <h2>案例:</h2>
    <el-table
      :data="exampleData"
      border
      stripe
    >
      <el-table-column
        :key="field"
        :label="column.label"
        :prop="field"
        :width="column.width"
        v-for="(column, field) of exampleDesc"
      >
        <template slot-scope="scope">
          <ele-editable
            :custom-attrs="column.customAttrs"
            :custom-data="{
              id: scope.row.id
            }"
            :default-value="column.defaultValue"
            :display-formatter="column.displayFormatter"
            :empty-text="column.emptyText"
            :field="field"
            :inline="column.inline"
            :options="column.options"
            :request-fn="handleChange"
            :rules="column.rules"
            :title="column.label"
            :type="column.type"
            :value-formatter="column.valueFormatter"
            v-model="scope.row[field]"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-ele-editable.umd.min.js"></script>
      <script  >
new Vue({
  el: '#app',
  data() {
    return {
      tableDesc: {
        type: {
          label: '类型' },

        desc: {
          label: '含义' },

        popover: {
          label: '演示(popover模式)' },

        inline: {
          label: '演示(inline模式)' } },


      tableData: [
      {
        type: 'text',
        desc: '静态文本',
        popover: {
          data: '我是静态文本' },

        inline: {
          data: '我是静态文本' } },


      {
        type: 'input',
        desc: '可编辑的单行文本',
        popover: {
          data: '我是可编辑的单行文本' },

        inline: {
          data: '我是可编辑的单行文本' } },


      {
        type: 'textarea',
        desc: '可编辑的多行文本',
        popover: {
          data: '我是可编辑的多行文本' },

        inline: {
          data: '我是可编辑的多行文本' } },


      {
        type: 'select',
        desc: '下拉框',
        popover: {
          data: 'beijing',
          options: [
          { text: '北京', value: 'beijing' },
          { text: '上海', value: 'shanghai' },
          { text: '深圳', value: 'shenzhen' }] },


        inline: {
          data: 'beijing',
          options: [
          { text: '北京', value: 'beijing' },
          { text: '上海', value: 'shanghai' },
          { text: '深圳', value: 'shenzhen' }] } },



      {
        type: 'number',
        desc: '可编辑数字',
        popover: {
          data: 10 },

        inline: {
          data: 10 } },


      {
        type: 'radio',
        desc: '单选',
        popover: {
          data: 1,
          options: [
          { text: '男', value: 0 },
          { text: '女', value: 1 }] },


        inline: {
          data: 1,
          options: [
          { text: '男', value: 0 },
          { text: '女', value: 1 }] } },



      {
        type: 'checkbox',
        desc: '多选',
        popover: {
          data: ['huawei', 'mi'],
          options: [
          { text: '华为', value: 'huawei' },
          { text: '小米', value: 'mi' },
          { text: '苹果', value: 'apple' }] },


        inline: {
          data: ['huawei', 'mi'],
          options: [
          { text: '华为', value: 'huawei' },
          { text: '小米', value: 'mi' },
          { text: '苹果', value: 'apple' }] } },



      {
        type: 'datetime',
        desc: '可编辑的日期时间 (可接受时间戳, 字符串, Date类型值)',
        popover: {
          data: new Date() },

        inline: {
          data: new Date() } },


      {
        type: 'datetime-text',
        desc: '不可编辑的日期时间 (接受值同.........完整代码请登录后点击上方下载按钮下载查看