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 代码的组件。