如何在包含<slot>的vuejs中使用html制作<tr>元素
在包含<slot>的Vue.js中使用HTML制作<tr>元素的方法如下：
- 首先，在Vue组件中，使用<template>标签包裹需要插入<tr>元素的地方，例如：
<template>
<table>
<tbody>
<slot></slot>
</tbody>
</table>
</template>- 在使用该组件的地方，可以通过在<slot>标签中插入HTML代码来创建<tr>元素。例如：
<my-component>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</my-component>这样，<tr>元素将会被插入到组件的<slot>标签所在的位置。
需要注意的是，Vue.js中的插槽（slot）是用来在组件中插入内容的特殊标记。通过使用插槽，可以在组件中定义一些占位符，然后在使用组件的地方插入具体的内容。
关于Vue.js的插槽和组件的更多信息，可以参考腾讯云的Vue.js官方文档：Vue.js官方文档。
相关·内容
我希望创建一个表组件，该组件通过colgroup和col标记分发样式列，并让使用该组件的人可以覆盖tbody内容的呈现方式。我在Vuejs中使用named slot，但在这里代码不起作用( colgroup和表正文内容槽似乎没有替换用户的内容)。
HTML
<body>
<div id='app'>
<simple-table>
<colgroup slot='colstyle'>
<col style='background-color: yellow;&#
浏览 2提问于2016-02-02得票数 1
回答已采纳
2回答
我读过这些文档，我不确定我想要达到的目标是否真的可行。我想要的是包含html标记的组件的属性，它显然会产生无效的html -因此我想知道是否有一种方法将html传递到组件中，并通过发出的事件进一步发送它。最合适的方法是拥有named slot，但我认为不能将命名槽的内容与内部属性相关联。
我工作的组件是一个简单的确认对话框。触发器组件将包装两个插槽-一个用于label，另一个用于消息，我希望将事件分派给对话框组件。
我的触发器组件现在看起来是这样的：
<template>
<a :class="cssClass" @click="clicked
浏览 0提问于2017-05-17得票数 1
1回答
我正在使用Vuetify来呈现一个表。现在我已经将表划分为两个组件：- Table组件和Row组件。如果我不把它分成两个独立组件，我就有一个onclick，我可以简单地在这个pen中的tr上调用它。但是当有两个不同的组件时，我怎么才能发出相同的函数呢？ 看看这个完整的sandbox。 这是我的表格组件： <template>
<div class="hello">
<v-container>
<v-layout>
<v-data-table
v-model=
浏览 16提问于2020-04-28得票数 0
回答已采纳
我正在用vue构建一个表，我使用插槽进行定制的格式化。F.e.表(是一个组件)使用thead-component，其中每个th都是一个作用域/命名槽。不过，为插槽指定模板只适用于父级到子级(至少看起来是这样-- vm.$scopedSlots对于thead-component是空的)。
这是它看起来的轮廓：
// in index.html
<my-table :data="data">
<template name="col1-header" props="column">
<th style="
浏览 4提问于2017-03-06得票数 0
回答已采纳
我想要制作一个网格组件，它接受作为槽附加列单元格。
<grid>
<td slot="additional-column">...</td>
</grid>
在实际构成部分中：
<template>
<table>
<div v-for="item in items">
...
<slot name="additional-column"></slot>
</div>
浏览 8提问于2017-12-08得票数 17
回答已采纳
我在努力学习VueJS。我还在初级阶段，所以请原谅任何误解。
我有一个.vue文件，它呈现一个自定义表元素。
<template>
<table v-bind:class="classes">
<slot></slot>
</table>
</template>
<script>
export default {
data() {
return {
styles: {
浏览 1提问于2018-06-30得票数 2
回答已采纳
1回答
我希望呈现一个自定义组件，该组件在表中显示一行。
我有以下代码：
// js file
Vue.component('message-row', {
data: function () {
return {
msg: 'Hello'
}
},
template: '<tr><td>{{ msg }}</td></tr>'
});
new Vue({
el: '#app'
});
// html
浏览 1提问于2018-06-08得票数 13
回答已采纳
1回答
我刚开始使用VueJS，我想知道是否有一种方法可以只显示一个按钮(包含一个插槽)，只显示是否有一个按钮的值被赋予这个插槽。
我使用的是BootstrapVue模态，代码如下：
我无法在代码片段中成功运行模式，但下面是打开的模式的截图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>J
浏览 1提问于2018-11-07得票数 3
我有一个包含一些通用数据的v-data-table。我想知道我是否可以通过搜索一个单词来突出显示我所获得的特定价值？
我当前的代码很简单&它的一小段代码如下所示。
编辑:我使用了officail vuetify文档中的CRUD-Actions示例。
<v-data-table
:headers="headers"
:items="rows"
item-key="name"
:search="search" >
<template v-slot:item=&#
浏览 15提问于2020-05-19得票数 0
回答已采纳
1回答
我有一个表，其中的一个列使用slot-scope，我不能将该列数据放入filters选项中。
代码
Component filter input
<el-input v-model="filters[0].value" placeholder="Type to filter"></el-input>
component HTML
问题部分被注释
<data-tables class="bg-white shadow-sm"
:data="transits"
:filters="
浏览 6提问于2020-08-20得票数 2
1回答
因此，我有一个Vuex设置，它返回我的headers和desserts。在我的desserts中，我有一个名为display的属性设置，它最初是false。我有一个组件Row，它在我的父组件中导入，名为Table。Row组件接受一对道具，即Name和Display。display道具是从vuex商店的desserts返回的。我正在尝试添加一个突变，以便在单击我的Row组件中的图标时，display.laptop可以切换为true和false。我已经设置了toggleLaptopDisplay，但我一直无法读取未定义的属性膝上型计算机。
请看完整的。
以下是完整的代码：
Vuex商店：-
exp
浏览 2提问于2020-06-23得票数 2
回答已采纳
当然，UI组件已经足够方便地包装了。但是，我想重用一些具有自定义选项的组件。
特别是，我想重用。
如果所有视图都有完全相同的头和数据，这是没有问题的。当每个视图都有不同的数据时，它就无法工作。
这是我的密码：
Wrapper.vue
<template>
<v-card>
<v-card-title>
<span class="pr-3">{{ tableTitle }}</span>
<slot name="actions"
浏览 0提问于2018-02-27得票数 9
我正在做一些第一次运行良好的过程，使用-
$("#daily-table").find("td.user-slot").mousedown(function (e) {
Some Process
}
但它不适用于在“每日表”标签中动态添加html。下面是我正在尝试的动态添加html的代码-
$(document).on("mousedown", "#daily-table > td.user-slot" , function(e) {
Some Process
}
这是HTML结构-
<table i
浏览 7提问于2020-01-02得票数 0
回答已采纳
下面的示例不是实际的有问题的代码，而是尽可能接近简化的情况，以便在这里进行讨论。
断例
下面的代码呈现一个表，但是将组件值(出乎意料地)放置在表元素之上，无论是视觉上还是在DOM中检查它时都是如此：
<html>
<head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head>
<body>
<div id="app">
<table border="1
浏览 1提问于2020-05-15得票数 1
回答已采纳
1回答
我使用ng-重复来制作所有axam插槽的表，如下所示：
<tr ng-repeat="id in exams | orderBy:sortType:sortReverse | filter:{licencetype:searchExam, studentId:assignfilter}">
免费的考试插槽线包含"ex_slot“在字段studentId。我想用无线电按钮过滤这张桌子。在这张桌子上，我用无线电按钮过滤这张桌子。
<label>
<input type="radio" ng-model="assignfi
浏览 3提问于2016-01-28得票数 1
1回答
vuejs专用循环
、、、
我在刀片里有这样的代码：
<tbody>
@for ($i = 1; $i <= n; $i++)
<tr data-nr="{{ $i }}" data-group="1">
<td rowspan="2">{{ $i }}</td>
<td></td>
</tr>
<tr data-nr="{{ $i }}" data-group
浏览 2提问于2021-04-09得票数 0
回答已采纳
1回答
我有两个Vue组件。The parent-component
Vue.component('parent-component',{
methods: {
test: function(){
alert('Option Selected');
}
},
template: `
<div><slot></slot></div>
`
});
animals组件：
浏览 4提问于2017-09-01得票数 3
回答已采纳
2回答
我使用的一个插件创建了动态background-color，我想使用通过props传递的十六进制来添加一个动态html。
这是我的组件中的html
<template>
<div class="pagination" slot="pagination"></div>
</template>
生成此对象的动态HTML
<div class="pagination" slot="pagination">
<span class="swiper-pagin
浏览 0提问于2017-09-11得票数 0
我想使一个表行组件，可以包含一个插槽，其中有html在它。问题是，浏览器在vuejs有机会呈现文本之前将文本提升到表之外。 例如，我想做一个像这样的https://codepen.io/mankowitz/pen/LqLRWr表 td, th {
border: 1px solid red;
}
.main-table {
border: 2px solid blue;
} <table class="main-table">
<thead>
<tr>
<th>Col1</th>
浏览 21提问于2019-02-04得票数 0
为了便于使用，我想制作一系列默认针对父组件中特定插槽的Lit web组件，这样我就不必每次想要使用这些子组件时都要写出slot属性。
在下面的示例中，我有一个包含触发器和内容组件的popover组件。触发器组件应该针对“触发器”插槽，而内容组件应该针对“内容”插槽。
我找到了用实现这一目标的方法，但还没有使用，这是我的公司正在使用的框架。
class Popover extends LitElement {
render () {
return html`
<div class="container">
浏览 15提问于2022-10-31得票数 1
回答已采纳
使用Vuejs/Laravel .I，使用这个简单的javascript代码生成刀片中的图表。
<script>
function getData(columnOrder, keyName) {
var obj, table = $("#t4"), array = [];
table.find('tbody tr').each(function() {
var rows = $(this).find('td:nth-child(' + columnOrder +')');
rows.each(fu
浏览 0提问于2018-12-28得票数 0
回答已采纳
1回答
我刚用VueJS和Vue-loader做了我的第一个项目。
因此，我制作了第一个组件来显示一条简单的消息，当我创建一条消息时，它工作得很好，但是当我发出多条消息时，我会得到一个错误：
(Emitted value instead of an instance of Error)
Error compiling template:
<message>This is a small message!</message>
<message>Another one</message>
- Component template sh
浏览 2提问于2017-04-22得票数 11
回答已采纳
日安，
为了学习VueJS，我想制作一个通用，它可以接收具有n属性的对象数组，其中n是未知的。
我发现的关于使用这些表的每个示例和文章都会将对象属性硬编码到它们的headers和items槽中，如下所示：
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td
浏览 1提问于2019-02-15得票数 0
回答已采纳
2回答
我目前正在使用Salesforce的“将文件拖到此处”组件，似乎如果我使用“拖放”NPM依赖项，它将不会出现任何错误，但屏幕永远不会弹出。 注意:在我们删除一个文件后，我们应该会看到一个弹出窗口，其中包含用于存储该文件的所有文件选项。 如果我用"Trigger Action“来做这件事，我会得到下面的错误信息： ? 我的代码如下： describe("Checklist - Drag and Drop Functionality", function () {
beforeEach(() => {
cy.login();
});
i
浏览 38提问于2021-06-24得票数 0
回答已采纳
我正在为一些加密货币制作一个交换书模拟器，我需要制作在表值后面的进度条。
接收数据的数据表具有以下模板：
<v-data-table
:headers="headers_ask"
:items="book_item[1]"
class="transparent data-table-books-asks ml-3 mr-3"
浏览 1提问于2022-04-26得票数 0
有没有人可以帮助我如何生成Xpath与以下html片段。我正在努力为它制作xpath，因为id，class对于如何为它生成Xpath有很大的...please帮助。
<input class="js-text-full text-full form-text required" data-drupal-selector="edit-page-content-0-subform-page-layout-content-0-subform-slot-1-0-subform-slot-content-form-inline-entity-form-module-type
浏览 1提问于2020-07-26得票数 2
2回答
我在shadowDOM自定义元素模板中应用了表格样式，在插槽中，它不接受表格th和td。
class Table extends HTMLElement {
constructor() {
super();
// console.log("this accordion -> ", this)
setTimeout(() => {
const template = document.createElement('template');
template.innerHTML = `
浏览 25提问于2020-10-22得票数 0
1回答
我希望创建一个用户注册可用时间的表，但是当我单击同一列中的两个或多个框时，数据将被最新的时间覆盖。我想将这些值作为字符串列表存储在数据库中。我的方法完全错了吗？因为我相信这是做我想做的事的最好也是最简单的方法。
views.py
def availability(request):
start = datetime(year=1, month=1, day=1, hour=8, minute=00, second=00)
time_slots = []
for x in range (0, 29):
time_slots.append(str(st
浏览 1提问于2021-01-24得票数 0
1回答
我正在尝试在组件槽中声明和访问vue组件。模态组件将被创建几次，并且它必须有一个唯一的名称，但我不知道如何在插槽中做到这一点。使用Laravel刀片和vueJs <template>
<table>
<thead>
<slot name="head"/>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
浏览 15提问于2021-09-24得票数 0
回答已采纳
1回答
我在用Vuejs我创建了两个组件：First和Second。
First呈现Second.Second有一个命名的slot.First包含一个<template>，进入Second的命名槽。在First的<template>中有另一个命名槽。在Second的<slot>中有一个<template>，进入First的<template>的命名槽。<code>H 225</code><code>G 226</code>
我得到的是First的<template>呈现在Second
浏览 3提问于2020-02-04得票数 0
回答已采纳
1回答
如何在自定义元素中创建自定义表？
、、、、
我正在使用发光元素开发一个自定义元素。我想创建我自己的自定义表元素，但是有一些问题。
第一。浏览器似乎只允许tr**，** td 标记用于 table**.**
<!-- in html -->
<my-table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</my-table>
<!-- chrome rendered -->
<my-table> A B </my-table>
第二。它可以模拟C
浏览 0提问于2018-10-31得票数 4
我正在尝试将Bootstrap Select2放在Vue包装中。不知怎么的，我的代码起作用了。但对我来说不太合适。
我在这里找到了一个参考在VueJS网站的例子中，el是空的。我没有坚持这个概念，在新的Vue部分中，它们包含了一个模板，因为我的el有侧边栏和其他东西。我所做的就是我增加了一个
<admin-access></admin-access>
到HTML中的某个部分。
我认为我的组件是嵌套的，我对它在VueJS中是否合适表示怀疑。
有更好的方法来编码这个吗？
模板
<template id="select2-template">
浏览 1提问于2017-08-30得票数 0
1回答
我想要包装2个html元素 这是我用vuejs编写的代码 <tr>
<th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th>
<th v-for="(item99,index) in product_all" :key="item99.id"><center>Amount</center></th>
浏览 22提问于2019-06-28得票数 1
回答已采纳
1回答
我正在学习VueJS，我想制作标签组件。我有一个main.js和index.html文件，如下所示： Vue.component('tabs', {
template: "<div><div class='tabs is-medium'><ul><li v-for='tabb in tabs' :class='{'is-active': tabb.selected}'><a href='#'>{{ tabb.name }}
浏览 14提问于2019-12-14得票数 0
回答已采纳
我将联合用于xpath，并为日和时创建了一个联合。现在，我能够捕捉到这个路径，但是当我过去使用xpath单击该元素时，没有选择合适的时隙。
我的xpath如下所示：.//*[@id='calendar']//*[@class='fc-first fc-last']//*[contains(@class,'fc-wed fc-col3 ui-widget-content')]|.//*[@id='calendar']//*[@class='fc-agenda-slots']//*[contains(@class,&#
浏览 0提问于2016-04-11得票数 3
嗨，im试图从vuejs2数组中删除元素，这是我的html代码。
<tr class="o_data_row o_selected_row" v-for='(line , id) in lines'>
<td>anything here</td>
<td class="o_list_record_remove" style='width:10%'>
<button @click='remove_line(id)' class=&#
浏览 4提问于2020-04-18得票数 1
回答已采纳
1回答
<template slot="items" slot-scope="props">
<tr>
<td><img src='/situation/static/my-images/Teste.png'
style = "widht: 251px; height: 209px" ><
浏览 18提问于2020-01-27得票数 0
1回答
我很难在父组件中使用来自子组件的命名槽。所以我正在制作带有主标签和子标签组件的标签组件。我的选项卡：
<template>
<div class="tabsMainContainer">
<div class="tabsContainer">
<ul class="tabsHeader">
<li
v-for="(tab, index) in tabs"
浏览 6提问于2020-11-13得票数 1
2回答
效果：
当您将鼠标悬停在TD元素上时，将出现一个带有文本和按钮的悬停框。在IE7中，这个框会出现，但一旦你试图将鼠标悬停在它上面，它就会消失。IE8+/FF/Ch/Sf都允许您将鼠标悬停在孩子的DIV上。我做错了什么？
简单的代码：
CSS
td {
position:relative;
width:30px;
}
.hovering_box {
display:none;
position:absolute;
margin-left:25px;
}
td .slot:hover .hovering_box {
display:block;
浏览 0提问于2011-06-25得票数 0
回答已采纳
我有一个像这样的模态组件
//modal component
<template>
<slot></slot>
<slot name='buttons'></slot>
</template>
我想用它当巫师
//wizard component
<template>
<modal>
<step1-state v-if='step === 1'/>
<step2-state v-if='step ==
浏览 3提问于2017-07-31得票数 1
回答已采纳
1回答
如何使这两个组件协同工作？
Vue.component('parent', {
template: ''+
'<slot name="foo"></slot>'+
''
});
Vue.component('child', {
template: ''+
'<div slot="foo">bar</div>'+
''
});
浏览 2提问于2017-09-12得票数 2
回答已采纳
1回答
我的要求是在表单中生成嵌套数据，并且每个数据都能够添加更多行或删除它们。我以前用过JavaScript做过这样的事情，但是使用VueJ，这是我的第一次尝试，所以我需要推:)
逻辑
父数据具有select选项，该选项允许用户选择他们需要的输入类型，并在此基础上追加输入。(红色)我的父数据可以添加或删除，这样我就可以有几个父数据，并且每个父数据都有几个子数据，同时(蓝色)，我的子数据可以被添加或删除(绿色)
代码
这是我的第一个静态html (还没有为它编写任何脚本)
Ps:所有部分都有注释。
<el-form-item label="Variation Name
浏览 6提问于2020-01-20得票数 3
3回答
考虑以下标记：
<div hidden id="table-template">
<table>
<tbody>
<slot></slot>
</tbody>
</table>
</div>
<div hidden id="table-row-template">
<tr>
<td>
Some Content
</td>
</tr>
</div>
我想在我的脚本中使用'
浏览 1提问于2017-06-06得票数 1
我有一个VueJS应用程序，其中包含用户列表和用户信息。 我使用两列布局，所以在左侧面板中，我正在加载用户的列表，当我点击任何用户时，用户的信息将加载到右侧面板。 我可以从右侧面板中查看和编辑用户的信息。但更新后的信息不会反映在左侧面板中。例如，如果我要编辑任何用户的名字和姓氏，那么它应该在左侧面板中更新，但我不知道如何在VueJS中做到这一点。 ? index.vue <template lang='pug'>
two-col-layout(v-loading='loading', :show-edit-view='isAddOr
浏览 16提问于2019-09-19得票数 0
我有一个VueJS组件
comp.vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
data () {
return {
}
},
}
</script>
我把这个Vue组件叫做Vue组件，就像其他组件一样：
...
<comp>as a title</comp>
<comp>as a p
浏览 3提问于2018-09-17得票数 2
我正在尝试创建基于表的"web组件“的数据网格。我使用TBODY中的插槽来附加新的项目。但是TR行从TBODY中呈现出来。我不明白这种行为。HTMLElement.appendChild()使用表和TR元素，原因可能是这样，但使用也不起作用
<html>
<head>
<script type="module">
class DataGrid extends HTMLElement {
TEMPLATE_ID = '#data-grid';
constructor() {
浏览 1提问于2020-09-15得票数 2
回答已采纳
1回答
我是Ajax新手，我用php和javascript编写了以下代码。我用Ajax编写了这个调用，但是我觉得出了问题。除了对insert.php文件的调用之外，一切都正常工作。
<div class="container">
<form action="" method="post" id="add_days_form">
<div class="table-responsive">
<span id="erro
浏览 0提问于2018-08-30得票数 0
我有两个组件-- Parent和Child --父母可以有很多孩子。我需要孩子们知道他们的地位(index)相对于他们的兄弟姐妹。
Javascript
Vue.component('Parent', {
template: '<div><slot></slot></div>',
mounted: function() {
this.$children.forEach(function(child, index) {
/* attempt one */
浏览 2提问于2017-08-30得票数 0
2回答
我的VueJs应用程序有点问题。我从ThemeForest那里买了Vuexy模板。所以我创建了新的组件调用程序CountryTable.vue，它实际上可以工作，但是当我刷新页面时，它不能工作，只有当我登录或更改另一个页面时，但是当我刷新它时，它显示该表是空的。下面是CountryTable的样子：
<template>
<div class="vx-col w-full">
<vx-card title="Countries">
<div slot="no-body" class="mt-4&#
浏览 0提问于2020-12-18得票数 0
1回答
我有一个网页，它显示来自JSON的信息表。搜索完成后，表格单元格会更改背景色，以匹配jason文件中返回的某些值。
参见中的示例
我的JSON和Jquery尝试
var data = [{
"id": "1",
"slot": "01",
"date": "20-01-2014",
"status": "1",
"code": "2"
}, {
"
浏览 3提问于2014-03-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
