在Element UI的Table组件中，可以通过设置type="radio"在每行中添加单选按钮。同时，你可以监听@change事件来获取被选中行的数据。

以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      type="radio"
      width="55">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id" v-model="selectedId" @change="handleRadioChange"></el-radio>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', ... }, ...],
      selectedId: null
    }
  },
  methods: {
    handleRowClick(row, column, event) {
      this.selectedId = row.id;
    },
    handleRadioChange(value) {
      console.log('Selected row ID:', this.selectedId);
    }
  }
}
</script>

在这个例子中，tableData是表格的数据源，selectedId是当前选中行的ID。通过handleRowClick方法和highlight-current-row属性，你可以在点击行时自动选择该行。在handleRadioChange方法中，你可以获取到当前选中的行的ID。

在Vue.js中使用Element Plus库的<el-table>组件时，可以通过动态绑定数据来实现动态添加、删除行以及输入框的响应。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="handleAdd">添加行</el-button>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎' },
      // ...可以添加更多行
    ]);
 
    const handleAdd = () => {
      tableData.value.push({ date: '', name: '' });
    };
 
    const handleDelete = (index) => {
      tableData.value.splice(index, 1);
    };
 
    return {
      tableData,
      handleAdd,
      handleDelete,
    };
  },
};
</script>

在这个示例中，tableData是一个响应式数组，它包含了表格中显示的数据。handleAdd方法用来向tableData数组添加新的空白行，而handleDelete方法则用来删除指定索引的行。每个el-table-column的prop属性分别绑定了对应的数据字段，而第二列使用了#default插槽来渲染一个el-input组件，用于输入数据。

当用户点击添加按钮时，会调用handleAdd方法添加新行；当用户点击删除按钮时，会调用handleDelete方法删除对应行。在el-input中输入的数据会实时反映在tableData数组中对应的元素上。

Element UI 的 <el-drawer> 组件本身不支持拖拽调整宽度的功能。但是你可以使用第三方库，如 vuedraggable 来实现拖拽功能，并结合 Element UI 的 <el-drawer> 组件来创建一个可调整宽度的抽屉。

以下是一个简单的例子，展示如何结合 vuedraggable 和 Element UI 创建一个可拖动调整宽度的抽屉：

1. 首先，确保你已经安装了 element-ui 和 vuedraggable：

npm install element-ui vuedraggable

2. 接下来，在你的 Vue 组件中使用它们：

<template>
  <div>
    <el-button @click="drawer = true">打开抽屉</el-button>
    <el-drawer
      title="可拖动调整宽度的抽屉"
      :visible.sync="drawer"
      :width="drawerWidth"
      :modal="false"
    >
      <vuedraggable class="drag-container" v-model="widths" @end="updateWidth">
        <div
          class="draggable-item"
          v-for="(width, index) in widths"
          :key="index"
          :style="{ width: width + 'px' }"
        ></div>
      </vuedraggable>
    </el-drawer>
  </div>
</template>
 
<script>
import { Drawer, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import vuedraggable from 'vuedraggable';
 
export default {
  components: {
    [Drawer.name]: Drawer,
    [Button.name]: Button,
    vuedraggable
  },
  data() {
    return {
      drawer: false,
      drawerWidth: 300,
      widths: [300]
    };
  },
  methods: {
    updateWidth(event) {
      const newIndex = event.newIndex;
      this.drawerWidth = this.widths[newIndex];
    }
  }
};
</script>
 
<style>
.drag-container {
  margin: 10px;
}
.draggable-item {
  margin: 10px; 
  cursor: move;
  background-color: #eee;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

在这个例子中，.draggable-item 是可拖动的元素，它们被包裹在 vuedraggable 组件中。每个 .draggable-item 的宽度来自 widths 数组。当拖动结束，updateWidth 方法会更新抽屉的宽度。这个例子提供了一个基本的框架，你可以根据自己的需求进一步扩展和定制。

在Element-UI中，可以通过在表单项中嵌套el-tooltip组件来实现表单项的提示信息（tooltip）。以下是一个简单的例子，展示了如何在一个Element-UI表单中为输入框添加tooltip提示信息：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-tooltip content="请输入用户名" placement="top" effect="light">
        <el-input v-model="form.username"></el-input>
      </el-tooltip>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // 其他表单数据
      },
    };
  },
};
</script>

在这个例子中，我们创建了一个带有el-tooltip的el-input元素。el-tooltip的content属性设置了提示信息的文本，placement属性定义了提示信息的位置（这里是顶部），effect属性定义了提示信息的视觉效果（这里是浅色背景）。当用户将鼠标悬停在输入框上时，会显示出一个带有文本提示的小提示框。

在Vue.js中使用ElementUI时，可以通过原生的@submit事件来提交表单数据。以下是一个简单的例子：

<template>
  <el-form @submit.native.prevent="onSubmit">
    <el-form-item label="用户名">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('提交的数据:', this.form);
      // 这里可以执行提交表单的逻辑，例如发送请求到后端
    }
  }
};
</script>

在这个例子中，我们使用了el-form组件来包裹输入元素，并且在el-form上监听了@submit事件。使用.native.prevent修饰符是为了确保监听的是原生的submit事件，并且阻止默认行为。在onSubmit方法中，我们打印出了表单的数据，实际应用中可以替换为发送请求到后端的逻辑。

由于问题描述不具体，我将提供一个使用Node.js、Vue和Element UI创建的简单KTV点歌管理系统的框架示例。

首先，确保你已经安装了Node.js和Vue CLI。

1. 创建一个新的Vue项目：

vue create ktv-management-system

2. 进入项目目录：

cd ktv-management-system

3. 添加Element UI：

vue add element

4. 编辑src/App.vue来设计界面，例如：

<template>
  <div id="app">
    <el-button @click="handleSongRequest">点击请求歌曲</el-button>
    <el-table :data="songs">
      <el-table-column prop="name" label="歌曲名"></el-table-column>
      <el-table-column prop="artist" label="歌手"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handlePlay(scope.row)">播放</el-button>
          <el-button @click="handleRemove(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      songs: [
        // 初始歌曲列表
      ]
    }
  },
  methods: {
    handleSongRequest() {
      // 处理点歌请求
    },
    handlePlay(song) {
      // 播放歌曲
    },
    handleRemove(song) {
      // 移除歌曲
    }
  }
}
</script>

5. 接下来，你需要设置一个Node.js服务器来处理点歌请求。在项目根目录创建一个server.js文件：

const express = require('express');
const app = express();
const port = 3000;
 
app.use(express.json()); // 用于解析JSON的中间件
 
// 点歌API
app.post('/api/songs', (req, res) => {
  const newSong = req.body;
  // 添加新歌曲的逻辑
  res.status(201).json({ message: 'Song requested', song: newSong });
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

6. 在package.json中添加启动服务器的脚本：

"scripts": {
  "start": "vue-cli-service serve",
  "server": "node server.js"
}

7. 启动服务器：

npm run server

8. 在另一个终端窗口中启动Vue应用：

npm run start

这个简单的框架展示了如何结合Vue和Element UI来创建一个KTV点歌管理系统的基本界面，以及如何使用Node.js服务器来处理点歌请求。你需要根据具体需求来扩展点歌逻辑、歌曲列表管理、用户认证等功能。

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: ''
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

这个例子展示了如何在Vue中使用Element UI库创建一个简单的表单。el-form 是表单的容器组件，el-form-item 用于封装表单中的每一个输入项，如el-input和el-select。v-model 用于绑定表单数据和用户的输入。el-button 是按钮组件，用于触发表单提交。这个例子也展示了如何使用$refs来访问和验证表单数据。

在Element UI的el-table组件中，合计行是自动生成的，并没有提供直接的方法来给合计行添加点击事件。但是，你可以通过自定义合计行的方式来实现这个需求。

以下是一个示例，展示了如何自定义合计行并添加点击事件：

<template>
  <el-table
    :data="tableData"
    show-summary
    :summary-method="customSummaryMethod"
    style="width: 100%;">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    };
  },
  methods: {
    customSummaryMethod({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          sums[index].setAttribute('style', 'cursor: pointer;');
          sums[index].onclick = this.handleSummaryClick;
        } else {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        }
      });
      return sums;
    },
    handleSummaryClick() {
      console.log('合计行被点击');
      // 在这里添加点击合计行后的逻辑
    }
  }
};
</script>

在上面的代码中，customSummaryMethod是用来自定义合计行的显示内容的方法。在这个方法中，我们通过对第一列（通常是合计行）的内容进行操作，给它添加了点击事件。当用户点击合计行时，会触发handleSummaryClick方法，并在控制台输出一条消息。

请注意，这种方法涉及到直接操作DOM，可能会在未来的Element UI版本中失效。如果Element UI更新了合计行的生成机制，这种方法可能需要更新。因此，这只是一个快速的解决方案，并不保证在未来的Element UI版本中仍然有效。

在 Element UI Plus 中，el-cascader 组件可以通过设置 props 属性中的 checkStrictly 来控制是否严格限制级别选择。如果你想要限制用户只能选择到某一个特定的级别，可以将 checkStrictly 设置为 true。

以下是一个简单的例子：

<template>
  <el-cascader
    :options="options"
    v-model="selectedValue"
    :props="{ checkStrictly: true }"
  ></el-cascader>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const selectedValue = ref([]);
    const options = ref([
      {
        value: 'guid1',
        label: 'Node 1',
        children: [
          {
            value: 'guid-1-1',
            label: 'Child 1-1'
          },
          {
            value: 'guid-1-2',
            label: 'Child 1-2',
            children: [
              {
                value: 'guid-1-2-1',
                label: 'Child 1-2-1'
              }
            ]
          }
        ]
      },
      {
        value: 'guid2',
        label: 'Node 2'
      }
    ]);
 
    return { selectedValue, options };
  }
};
</script>

在这个例子中，el-cascader 的 options 属性定义了级联选项，props 中的 checkStrictly 设置为 true 表示只能选择到最后一个层级的选项，不能再选择子选项。用户的选择将被绑定到 selectedValue 这个响应式数据上。

<template>
  <el-container class="layout-container">
    <el-header>Header Content</el-header>
    <el-main>
      <el-scrollbar style="height: 100%;">
        <!-- 主体内容 -->
        Main Content
      </el-scrollbar>
    </el-main>
    <el-footer>Footer Content</el-footer>
  </el-container>
</template>
 
<script>
export default {
  name: 'LayoutExample',
  // 其他组件选项...
};
</script>
 
<style scoped>
.layout-container {
  height: 100vh; /* 视窗高度 */
}
</style>

这个简单的Vue组件使用了Element UI的<el-container>、<el-header>、<el-main>和<el-footer>组件来创建一个带有头部、底部的页面布局，并且在主体内容区域使用了<el-scrollbar>组件来提供滚动功能。这个例子展示了如何结合Element UI库来快速搭建一个具有布局和滚动功能的页面。