Vue项目-Element-UI可编辑表格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、HTML
<template>
<div class="cesiumTabRoot">
<el-table
:data="tabData"
border
:cell-class-name="tabCellClassName"
:row-class-name="tabRowClassName"
@cell-click="cellClick">
<!-- 序号 -->
<el-table-column type="index" label="序号" width="50"></el-table-column>
<!-- 姓名 -->
<el-table-column label="姓名">
<template slot-scope="{ row, column }">
<!-- 编辑 -->
<el-input
v-focus
v-if="rowIndex === row.index && columnIndex === column.index"
v-model="row.name"
@blur="hideInput"></el-input>
<!-- 显示 -->
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<!-- 年龄 -->
<el-table-column label="年龄">
<template slot-scope="{ row, column }">
<!-- 编辑 -->
<el-input
v-focus
v-if="rowIndex === row.index && columnIndex === column.index"
v-model="row.age"
@blur="hideInput"></el-input>
<!-- 显示 -->
<span v-else>{{ row.age }}</span>
</template>
</el-table-column>
<!-- 性别 -->
<el-table-column label="性别">
<template slot-scope="{ row, column }">
<!-- 编辑 -->
<el-input
v-focus
v-if="rowIndex === row.index && columnIndex === column.index"
v-model="row.sex"
@blur="hideInput"></el-input>
<!-- 显示 -->
<span v-else>{{ row.sex }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
2、Script
<script>
export default {
name: "CesiumTab",
components: {},
props: {},
data() {
return {
// 表格数据
tabData: [
{
name: "张三",
age: 18,
sex: "男"
},
{
name: "李四",
age: 19,
sex: "男"
},
{
name: "王五",
age: 20,
sex: "男"
},
],
// 行index
rowIndex: null,
// 列index
columnIndex: null,
};
},
computed: {},
created() {},
mounted() {},
methods: {
// 给表格单元格数据添加列下标
tabCellClassName({ column, columnIndex }) {
column.index = columnIndex + 1;
},
// 表格行class-name
tabRowClassName({ row, rowIndex }) {
row.index = rowIndex + 1;
},
// 点击表格单元格编辑
cellClick(row, column) {
this.rowIndex = row.index;
this.columnIndex = column.index;
},
// 表格input失去焦点
hideInput() {
this.rowIndex = null;
this.columnIndex = null;
},
},
};
</script>
3、Css
<style lang="less" scoped>
.cesiumTabRoot {
width: 100%;
height: 100vh;
.cesiumTab {
width: 100%;
height: 100%;
background-color: rgba(#041a07, 0.7);
padding: 10px;
border: 1px solid #049a57;
box-sizing: border-box;
// 表格
/deep/ .el-table::before {
background: #4caa81;
}
/deep/ .el-table::after {
background: #4caa81;
}
/deep/ .el-table {
width: 100%;
height: 80% !important;
background-color: transparent;
border-color: #4caa81;
display: flex;
flex-direction: column;
.el-input {
width: 90%;
.el-input__inner {
color: #fff !important;
height: 20px !important;
}
}
& tr {
background-color: transparent !important;
}
th,
td {
text-align: center;
border-color: #4caa81;
color: #fff;
background-color: transparent !important;
}
.el-table__cell {
padding: 5px 0px !important;
}
.cell {
padding: 0px !important;
}
.el-table__body-wrapper {
width: 100%;
flex: 1;
overflow-y: auto;
}
}
}
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)