电脑网站自适应怎么做,浙江建设集团网站,洛阳小程序定制,app开发方案前言
一般情况table列表的展示#xff0c;列头都在第一横行#xff0c;此方法用于列头在第一列的情况。
效果图 核心代码
templatedivtable classdata-tabletr v-for(column, columnIndex) in columns :keycol…前言
一般情况table列表的展示列头都在第一横行此方法用于列头在第一列的情况。
效果图 核心代码
templatedivtable classdata-tabletr v-for(column, columnIndex) in columns :keycolumn- columnIndexth classheader-cell{{ column }}/thtd v-for(row, rowIndex) in data :keyrow- rowIndex styleborder: 1px solid black;!-- 如果当前列是name, 则显示一个带有名字的按钮 --div v-ifcolumn name{{ row[column] }}button typebutton clickhandleButtonClickClick Me/button/div!-- 如果当前列是 image, 显示图片 --img v-else-ifcolumn image :srcrow[column] altImage /span v-else{{ row[column] }}/span/td/tr/table/div
/templatescript
export default {data () {return {// 一般为后端接收数据视情况而定data: [{ name: a, age: 1, image: https://example.com/image1.png },{ name: b, age: 2, image: https://example.com/image2.png },{ name: c, age: 3, image: https://example.com/image3.png },// 更多数据...],columns: [name, age, image],};},methods: {handleButtonClick() {alert(Button clicked!);},},
};
/scriptstyle scoped
.data-table {border-collapse: collapse; /* 删除边框之间的间距 */width: 100%; /* 表格全宽 */max-width: 600px; /* 最大宽度 */margin: 0 auto; /* 水平居中 */background-color: #ddd;color: black;
}.header-cell,
.data-cell {border: 1px solid #ddd; /* 单元格边框 */padding: 8px; /* 单元格内边距 */text-align: left; /* 文本左对齐 */
}.header-cell {background-color: blanchedalmond; /* 表头背景 */font-weight: bold; /* 表头字体加粗 */color: black;
}
/style核心逻辑
首先我们使用 Vue 的 v-for 指令来遍历我们的数据分别创建行 column 和列 row。每个 th 标签用于表示头部单元格而每个 td 标签为表格的数据单元格。最关键的部分是我们要在每个 td 标签中加入逻辑判断根据不同的列 column展示不同的格式。在这个示例中我们对 name, age 和 image 三种列进行了处理- 对于 name 列, 我们在显示名称数据后还附加了一个按钮按钮点击后会调用 handleButtonClick 方法进行对应操作
- 对于 image 列, 我们使用了 v-else-if 指令此处我们显示一个对应的图片图片链接为该行 image 列的数据
- 对于其他列我们直接展示列中的数据。
