el-table中textarea如何设置高度

对于el-table中的textarea，你可以通过设置其样式来改变其高度，例如：

<template>
  <el-table :data="tableData">
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="内容">
      <template slot-scope="scope">
        <textarea v-model="scope.row.content" class="textarea-style"></textarea>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.textarea-style {
  height: 100px; // 设置textarea的高度为100px
}
</style>

这样就可以将el-table中的textarea的高度设置为100px。

相关问题

vue el-table 可双击编辑单元格 html代码

要实现双击编辑 el-table 单元格并渲染 HTML 代码，可以使用 el-table 的 edit-config 属性和 edit-template 属性。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" :edit-config="{trigger: 'dblclick'}" :edit-template="getEditTemplate">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="desc" label="描述"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, desc: '<b>我是张三</b>' },
        { name: '李四', age: 25, desc: '<b>我是李四</b>' },
        { name: '王五', age: 30, desc: '<b>我是王五</b>' }
      ],
      editingRow: null
    }
  },
  methods: {
    getEditTemplate({ row, column }) {
      if (column.property === 'desc') {
        return `
          <div>
            <el-input type="textarea" v-model="row.desc"></el-input>
          </div>
        `
      }
    }
  }
}
</script>

在上面的代码中，我们将 el-table 的 edit-config 属性设置为 { trigger: 'dblclick' }，表示双击单元格时进入编辑模式。然后，我们使用 el-table 的 edit-template 属性指定一个函数，用于渲染编辑单元格的模板。

在 getEditTemplate 函数中，我们检查当前单元格的属性是否为 'desc'，如果是，则返回一个包含文本框的编辑模板。在模板中，我们使用 v-model 指令将文本框的值绑定到当前行的 desc 属性上。

这样，我们就实现了一个可以双击编辑 el-table 单元格并渲染 HTML 代码的组件。

详细解释一下这段代码<template> <div> <div class="wrap"> <el-table :data="orders"> <el-table-column prop="oid" label="订单编号" width="180" /> <el-table-column prop="ctime" label="创建时间" width="180" /> <el-table-column prop="money" label="金额" /> <el-table-column prop="payType" :formatter="formatterPayType" label="支付方式" /> <el-table-column prop="uname" label="收件人" /> <el-table-column prop="phone" label="收件人手机号" /> <el-table-column prop="address" label="收件地址" /> <el-table-column prop="waybill" label="运单号" :formatter="formatterWayBill"/> <el-table-column label="详细" > <template #default="scope"> <el-button type="primary" @click="seeDetail(scope.row)">详情</el-button> </template> </el-table-column> </el-table> </div> <el-dialog v-model="detailShow" title="订单详细" width="70%"> <el-table :data="goods"> <el-table-column prop="mainImg" label="商品图片"> <template #default="scope"> <el-image style="width: 70px; height: 70px" :src="scope.row.mainImg" alt="" :fit="fill" ></el-image> </template> </el-table-column> <el-table-column prop="bname" label="商品名称" /> <el-table-column prop="price" label="单价" /> <el-table-column prop="uname" label="数量" :formatter="formatterNum"/> </el-table> <template #footer> <span class="dialog-footer"> <el-button type="danger" @click="openFeedBack">反馈</el-button> </span> </template> </el-dialog> <el-dialog v-model="feedbackShow" title="反馈" width="70%" @close="clodeFeedback"> <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请输入你遇到的问题" /> <span style="font-family: 'Arial Rounded MT Bold';font-weight: bold;"> {{feedBackDetail.respondent}} </span> <span>{{feedBackDetail.replyContent}}</span> <template #footer>

这段代码是一个基于 ElementUI 组件库的 Vue.js 组件，它包含了一个表格和两个弹窗。表格展示了一些订单信息，包括订单编号、创建时间、金额、支付方式、收件人姓名和手机号、收件地址、运单号等，其中支付方式和运单号的展示方式通过 formatter 属性指定了自定义的格式化函数。表格中还包括一个“详细”列，点击“详情”按钮可以弹出一个订单详细信息的弹窗，包括商品图片、商品名称、单价、数量等。在订单详细信息弹窗中，还包括一个“反馈”按钮，点击可以弹出反馈弹窗，用户可以在反馈弹窗中输入遇到的问题。整个组件使用了 Vue.js 的模板语法和 ElementUI 的组件，通过编写组件的逻辑代码和样式来实现功能。