vue表格怎么嵌套输入框和上传图片

可以使用自定义组件来实现在表格中嵌套输入框和上传图片。

1. 创建自定义组件

在Vue项目中创建一个新的组件，可以命名为“TableInputImage”，并在该组件中定义一个上传图片和输入框。

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <input type="file" @change="onFileChange" />
    <img :src="imageUrl" v-if="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      imageUrl: '',
    };
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageUrl = reader.result;
      };
    },
  },
};
</script>

2. 在表格中使用自定义组件

在表格中使用自定义组件，可以将“TableInputImage”组件作为表格中的一个列的渲染函数。例如：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <table-input-image></table-input-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TableInputImage from '@/components/TableInputImage';

export default {
  components: {
    TableInputImage,
  },
  data() {
    return {
      tableData: [
        { name: '商品1', image: '' },
        { name: '商品2', image: '' },
        { name: '商品3', image: '' },
      ],
    };
  },
};
</script>

在这个例子中，“TableInputImage”组件被嵌套在“el-table-column”标签中，并且作为一个插槽来渲染。

3. 获取表格中的数据

为了获取表格中的数据，可以在“TableInputImage”组件中触发一个自定义事件，并将输入框和图片的值传递回父组件。例如：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="onInput" />
    <input type="file" @change="onFileChange" />
    <img :src="imageUrl" v-if="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      imageUrl: '',
    };
  },
  methods: {
    onInput() {
      this.$emit('input', {
        inputValue: this.inputValue,
        imageUrl: this.imageUrl,
      });
    },
    onFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageUrl = reader.result;
        this.onInput();
      };
    },
  },
};
</script>

在这个例子中，当输入框或图片发生变化时，将触发一个“input”事件，并将输入框和图片的值作为一个对象传递回父组件。在父组件中，可以监听这个事件并更新表格中的数据。例如：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <table-input-image @input="onInput(scope.$index, $event)"></table-input-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TableInputImage from '@/components/TableInputImage';

export default {
  components: {
    TableInputImage,
  },
  data() {
    return {
      tableData: [
        { name: '商品1', image: '' },
        { name: '商品2', image: '' },
        { name: '商品3', image: '' },
      ],
    };
  },
  methods: {
    onInput(index, data) {
      this.tableData[index].inputValue = data.inputValue;
      this.tableData[index].imageUrl = data.imageUrl;
    },
  },
};
</script>

在这个例子中，“TableInputImage”组件触发了一个“input”事件，并将输入框和图片的值作为一个对象传递回父组件。在父组件中，可以监听这个事件并更新表格中的数据，通过索引来定位到正确的行。