Question

我正在使用具有可扩展行功能的表。单击展开图标时，行将展开，您可以检查示例HERE。但是，我想做的是，点击整个行，然后切换展开和折叠行，就像单击扩展图标时一样。

请帮助。

这是我的标记：

<template lang="pug">
  el-table(:data="tableData")
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name: {{ props.row.userName }}
        p Company Name: {{ props.row.companyName }}
</template>

Answer 1

好的，我找到了解决方案并回答了自己的问题：）

标记：

def getConnection():
    mydb = mysql.connector.connect(
        host="localhost",
        user="***",
        passwd="***",
        database="***")

    return mydb

def INSERT_DEBIT(jsonData):
    mydb = getConnection()
    cur = mydb.cursor()

    # Read json from MQTT
    # rest of your code here...

    cur.close()
    mydb.close()

脚本：

<template lang="pug">
  el-table(:data="tableData", @row-click="rowClicked", ref="tableData").clickable-rows
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name: {{ props.row.userName }}
        p Company Name: {{ props.row.companyName }}
</template>

样式-scss

<script>
  export default {
    methods: {
      rowClicked(row) {
        this.$refs.tableData.toggleRowExpansion(row);
      }
    }
  }
</script>

如何使表格行可点击并扩展行-Vue.js-Element-UI

1 个答案: