el-tree和el-table相关使用_rfalcon

大大的周 02-07 4821

文章目录 el-tree实现模糊查询el-tree实现node节点增删改el-tree 实现节点懒加载el-tree获取所有选中的当前节点el-tree获取当前节点及其选中父节点el-table 获取多选行的所有节点el-table 动态添加删除行数据vue+element ui实现table表格行的上下移动el-table动态添加实现元素校验el-tree通过条件控制节点的操作el-table 实现动态拖拽el-form 实现动态添加并实现校验el-table 动态增行通过dialog操作并将数据回显到table中v3实现table行的可选择展开

el-tree实现模糊查询 <template> <div class="app-container"> <el-input placeholder="请搜索" prefix-icon="el-icon-search" v-model="filterText"></el-input> <el-tree :data="epTree" default-expand-all :props="defaultProps" :expand-on-click-node="false" ref="tree" :filter-node-method="filterNode"></el-tree> </div> </template> <script> export default { data () { return { epTree: [ { id: 1, label: '一级公司', children: [ { id: 11, label: '一级子公司1', children: [ { id: 22, label: '二级子公司11', } ] }, { id: 12, label: '一级子公司2' } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, filterText:'' } }, watch:{ filterText(val){ this.$refs.tree.filter(val) } }, methods:{ filterNode(value,data){ if(!value) return true return data.label.indexOf(value) !== -1 } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-tree实现node节点增删改 <template> <div class="app-container"> <el-tree :data="epTree" default-expand-all :props="defaultProps" :expand-on-click-node="false" :render-content="renderContent" ></el-tree> <el-dialog title="新增" :visible.sync="addDialog" width="30%" :before-close="handleAddClose" :modal-append-to-body="false" > <span>node信息：</span> <div>{{nodeInfo}}</div> <span slot="footer" class="dialog-footer"> <el-button @click="addDialog = false">取消</el-button> <el-button type="primary" @click="addDialog = false">确定</el-button> </span> </el-dialog> <el-dialog title="修改" :visible.sync="editDialog" width="30%" :before-close="handleEditClose" :modal-append-to-body="false" > <span>node信息：</span> <div>{{nodeInfo}}</div> <span slot="footer" class="dialog-footer"> <el-button @click="editDialog = false">取消</el-button> <el-button type="primary" @click="editDialog = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { epTree: [ { id: 1, label: '一级公司', children: [ { id: 11, label: '一级子公司1', children: [ { id: 22, label: '二级子公司11', } ] }, { id: 12, label: '一级子公司2' } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, addDialog: false, editDialog:false, nodeInfo:[] } }, methods: { renderContent(h, { node, data, store }) { return ( <div style="width:100%;"> <span style="margin-right:10px;">{node.label}</span> <span><i on-click={() => this.append(data)} class="el-icon-plus" title="添加"></i></span> <span style="margin-left:8px;"><i on-click={() => this.update(data)} class="el-icon-edit" title="修改"></i></span> <span style="margin-left:8px;"><i on-click={() => this.delete(data)} class="el-icon-delete" title="删除"></i></span> </div> ) }, append(data) { this.addDialog = true this.nodeInfo = data }, update(data) { this.editDialog = true this.nodeInfo = data }, delete(data) { this.$confirm('是否删除选中的节点?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 请求删除节点api console.log(data); }).catch(err => console.log(err)) }, handleAddClose() { this.addDialog = false }, handleEditClose(){ this.editDialog = false } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-tree 实现节点懒加载 <template> <div class="app-container"> <el-tree :data="epTree" :props="defaultProps" :load="loadNode" lazy @check-change="handleCheckChange" > </el-tree> </div> </template> <script> export default { data () { return { epTree: [ { id: 1, label: '一级公司', children: [ { id: 11, label: '一级子公司1', children: [ { id: 22, label: '二级子公司11', } ] }, { id: 12, label: '一级子公司2' } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, // 带根节点的情况 // rootNode: { // 'id': '0', // 'label': '所属企业分类树' // } } }, methods: { // 带根节点的情况 // loadNode (node, resolve) { // let self = this // if (node.level === 0) { // console.log('第一次加载根节点'); // return resolve([self.rootNode]) // } else { // console.log('加载子节点'); // // 加载树形结构数据 // // let params = { // // userId:2, // // pcode:node.id // // } // // fetchEpTreeData(params).then(res => { // // if(res.code === 0){ // // let epTree = res.data // // } // // }).catch(err => console.log(err)) // let epTree = this.epTree // console.log('返回列表', epTree); // resolve(epTree) // } // }, // 不带根节点 loadNode (node, resolve) { // 加载树形结构数据 // let params = { // userId:2, // pcode:node.id ? node.id : '' // } // fetchEpTreeData(params).then(res => { // if(res.code === 0){ // let epTree = res.data // } // }).catch(err => console.log(err)) let epTree = this.epTree resolve(epTree) }, handleCheckChange (value) { console.log(value); } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-tree获取所有选中的当前节点 <template> <div class="app-container"> <el-tree node-key="id" :data="epTree" show-checkbox check-strictly :props="defaultProps" default-expand-all @check-change="handleCheckChange" > </el-tree> {{selectedKeys}} </div> </template> <script> export default { data () { return { epTree: [ { id: 1, label: '一级公司', children: [ { id: 11, label: '一级子公司1', children: [ { id: 22, label: '二级子公司11', } ] }, { id: 12, label: '一级子公司2' } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, selectedKeys:[] } }, methods: { handleCheckChange (value) { if(!this.selectedKeys.includes(value.id)){ this.selectedKeys.push(value.id) }else{ this.selectedKeys = this.selectedKeys.filter(item => item !== value.id) } } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-tree获取当前节点及其选中父节点 <template> <div class="app-container"> <el-tree node-key="id" :data="epTree" show-checkbox :props="defaultProps" default-expand-all ref="treeRef" > </el-tree> <el-button type="primary" @click="getSelectedKeys" >获取选中节点及其父节点</el-button > {{ selectedKeys }} </div> </template> <script> export default { data () { return { epTree: [ { id: 1, label: '一级公司', children: [ { id: 11, label: '一级子公司1', children: [ { id: 22, label: '二级子公司11', } ] }, { id: 12, label: '一级子公司2' } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, selectedKeys: [] } }, methods: { getSelectedKeys () { this.selectedKeys = this.getCheckedKeys(this.epTree, this.$refs.treeRef.getCheckedKeys(), 'id') }, getCheckedKeys (data, keys, key) { var res = [] recursion(data, false); return res function recursion (arr, isChild) { var aCheck = [] for (let i = 0; i < arr.length; i++) { var obj = arr[i] aCheck[i] = false if (obj.children) { aCheck[i] = recursion(obj.children, true) ? true : aCheck[i] if (aCheck[i]) { res.push(obj[key]) } } for (var j = 0; j < keys.length; j++) { if (obj[key] == keys[j]) { aCheck[i] = true; if (res.indexOf(obj[key]) == -1) { res.push(obj[key]); } break; } } } if (isChild) { return aCheck.indexOf(true) != -1; } } } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-table 获取多选行的所有节点 <template> <div class="app-container"> {{multipleSelections}} <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column type="index" label="#"></el-table-column> <el-table-column prop="label" label="展示"></el-table-column> </el-table> </div> </template> <script> export default { data () { return { tableData:[ { id:1, label:'展示1' }, { id:2, label:'展示2' }, { id:3, label:'展示3' }, { id:4, label:'展示4' }, { id:5, label:'展示5' } ], multipleSelections:[] } }, methods: { handleSelectionChange(val){ this.multipleSelections = [] val.length > 0 && val.forEach(item => { this.multipleSelections.push(item.id) }); } } } </script>

el-table 动态添加删除行数据 <template> <div class="app-container"> <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#3d80f2', color: '#fff', fontSize: '14px', height: '40px', }" > <el-table-column prop="numbering" label="编号" align="center" ></el-table-column> <el-table-column prop="title" label="标题" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.title" placeholder="请输入" ></el-input> </template> </el-table-column> <el-table-column prop="type" label="类型" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.type" placeholder="请选择" clearable > <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" ></el-option> </el-select> </template> </el-table-column> <el-table-column prop="status" label="状态" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.status"></el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="addClick">新增</el-button> <el-button type="text" style="color:red;" @click="handleDelete(scope.$index, scope.row)" >删除</el-button > </template> </el-table-column> </el-table> </div> </template> <script> export default { data () { return { tableData: [ { numbering: "编号-1", title: "", type:null, status:true, } ], options:[ { id:1, label:'类型1' },{ id:2, label:'类型2' },{ id:3, label:'类型3' } ] } }, methods: { //新增方法 addClick () { this.valNumer = this.valNumer + 1; var list = { numbering: "编号" + `-${this.tableData.length + 1}`, title: this.title, type:this.type, status:this.status }; this.tableData.push(list); }, //删除新增的某行数据 handleDelete (index, row) { this.tableData.splice(index, 1); for (var i = index; i < this.tableData.length; i++) {//从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据 this.tableData[i].numbering = "编号" + `-${Number(this.tableData[i].numbering.split("-")[1]) - 1}`; } } } }; </script> <style lang="scss" scoped> .dialogDiv { height: 300px; overflow: auto; } </style>

vue+element ui实现table表格行的上下移动 <template> <div class="app-container"> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column type="index" label="#"></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-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="text" :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)" ><i class="el-icon-arrow-up"></i ></el-button> <el-button size="mini" type="text" :disabled="scope.$index === tableData.length - 1" @click="moveDown(scope.$index, scope.row)" ><i class="el-icon-arrow-down"></i ></el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, methods: { //上移 moveUp (index, row) { var that = this; if (index > 0) { let upDate = that.tableData[index - 1]; that.tableData.splice(index - 1, 1); that.tableData.splice(index, 0, upDate); } else { alert('已经是第一条，不可上移'); } }, //下移 moveDown (index, row) { var that = this; if ((index + 1) === that.tableData.length) { alert('已经是最后一条，不可下移'); } else { let downDate = that.tableData[index + 1]; that.tableData.splice(index + 1, 1); that.tableData.splice(index, 0, downDate); } } } } </script>

el-table动态添加实现元素校验 <template> <div class="app-container"> <el-form ref="form" :model="tableObj"> <el-table :data="tableObj.tableData" style="width: 100%" :header-cell-style="{ background: '#3d80f2', color: '#fff', fontSize: '14px', height: '40px', }" > <el-table-column prop="numbering" label="编号" align="center" ></el-table-column> <el-table-column prop="title" label="标题" align="center"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.title'" :rules="rules.title" > <el-input v-model="scope.row.title" placeholder="请输入" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="title" label="数量" align="center"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.number'" :rules="rules.number" > <el-input v-model="scope.row.number" type="number" placeholder="请输入" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="type" label="类型" align="center"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.type'" :rules="rules.type" > <el-select v-model="scope.row.type" placeholder="请选择" clearable > <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" ></el-option> </el-select> </el-form-item> </template> </el-table-column> <el-table-column prop="status" label="状态" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.status"></el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="addClick">新增</el-button> <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)" >删除</el-button > </template> </el-table-column> </el-table> </el-form> <div style="text-align: center; margin-top: 20px"> <el-button type="primary" size="mini" @click="handleSubmit" >提交</el-button > </div> </div> </template> <script> export default { data () { return { tableObj: { tableData: [ { numbering: "编号-1", title: "", number: '', type: '', status: true, } ] }, rules: { title: [{ required: true, message: "标题不能为空", trigger: "blur" }], number: [{ required: true, message: "数量不能为空", trigger: "blur" }], type: [{ required: true, message: "类型不能为空", trigger: "blur" }] }, options: [ { id: 1, label: '类型1' }, { id: 2, label: '类型2' }, { id: 3, label: '类型3' } ] } }, methods: { //新增方法 addClick () { this.valNumer = this.valNumer + 1; var list = { numbering: "编号" + `-${this.tableObj.tableData.length + 1}`, title: this.title, type: this.type, status: this.status }; this.tableObj.tableData.push(list); }, //删除新增的某行数据 handleDelete (index, row) { this.tableObj.tableData.splice(index, 1); for (var i = index; i < this.tableObj.tableData.length; i++) {//从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据 this.tableObj.tableData[i].numbering = "编号" + `-${Number(this.tableObj.tableData[i].numbering.split("-")[1]) - 1}`; } }, handleSubmit () { console.log('submit'); this.$refs["form"].validate(valid => { if (valid) { console.log('valid'); } }) } } }; </script> <style lang="scss" scoped> .dialogDiv { height: 300px; overflow: auto; } </style>

el-tree通过条件控制节点的操作 <template> <div class="app-container"> <el-tree :data="epTree" default-expand-all :props="defaultProps" :expand-on-click-node="false" :render-content="renderContent" ></el-tree> <el-dialog title="新增" :visible.sync="addDialog" width="30%" :before-close="handleAddClose" :modal-append-to-body="false" > <span>node信息：</span> <div>{{nodeInfo}}</div> <span slot="footer" class="dialog-footer"> <el-button @click="addDialog = false">取消</el-button> <el-button type="primary" @click="addDialog = false">确定</el-button> </span> </el-dialog> <el-dialog title="修改" :visible.sync="editDialog" width="30%" :before-close="handleEditClose" :modal-append-to-body="false" > <span>node信息：</span> <div>{{nodeInfo}}</div> <span slot="footer" class="dialog-footer"> <el-button @click="editDialog = false">取消</el-button> <el-button type="primary" @click="editDialog = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { /** * flag=1 新增、删除 * flag=2 修改、删除 * flag=3 修改 */ epTree: [ { id: 1, label: '一级公司', flag:1, children: [ { id: 11, label: '一级子公司1', flag:2, children: [ { id: 22, label: '二级子公司11', flag:1 } ] }, { id: 12, label: '一级子公司2', flag:3 } ] } ], // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置 defaultProps: { id: 'id', label: 'label', children: 'children' }, addDialog: false, editDialog:false, nodeInfo:[] } }, methods: { renderContent(h, { node, data, store }) { return ( <div style="width:100%;"> <span style="margin-right:10px;">{node.label}</span> { data.flag === 1 ? <span><i on-click={() => this.append(data)} class="el-icon-plus" title="添加"></i></span> : '' } { (data.flag === 2 || data.flag === 3) ? <span style="margin-left:8px;"><i on-click={() => this.update(data)} class="el-icon-edit" title="修改"></i></span> : '' } { (data.flag === 1 || data.flag === 2) ? <span style="margin-left:8px;"><i on-click={() => this.delete(data)} class="el-icon-delete" title="删除"></i></span> : '' } </div> ) }, append(data) { this.addDialog = true this.nodeInfo = data }, update(data) { this.editDialog = true this.nodeInfo = data }, delete(data) { this.$confirm('是否删除选中的节点?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 请求删除节点api console.log(data); }).catch(err => console.log(err)) }, handleAddClose() { this.addDialog = false }, handleEditClose(){ this.editDialog = false } } } </script> <style lang="scss" scoped> .el-tree /deep/ .el-tree__empty-block { width: 200px; } .el-tree /deep/ .el-tree-node > .el-tree-node__content { font-size: 14px; font-family: MicrosoftYaHei; color: #666666; } .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content { background-color: #e6f8ff !important; color: #017cd9 !important; } </style>

el-table 实现动态拖拽 <template> <div class="draggable" style="padding: 20px"> <el-table row-key="id" :data="tableData" style="width: 100%" border> <el-table-column v-for="(item, index) in oldList" :key="`col_${index}`" :prop="newList[index].prop" :label="item.label" align="center" > </el-table-column> </el-table> </div> </template> <script> import Sortable from 'sortablejs'; export default { mounted () { this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems)) this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems)) this.columnDrop() this.rowDrop() }, data () { return { oldList: [], newList: [], tableData: [ { id: 1, name: '李一', gender: '男', age: 30, job: "会计" }, { id: 2, name: '王二', gender: '未知', age: 18, job: "无业游民" }, { id: 3, name: '张三', gender: '男', age: 50, job: "老板" }, ], tableConfig: { tableItems: [ { label: '序号', prop: 'id' }, { label: '姓名', prop: 'name', }, { label: '性别', prop: 'gender', }, { label: '年龄', prop: 'age', }, { label: '工作', prop: 'job', }, ] } } }, methods: { // 行拖拽 rowDrop () { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody'); const _this = this; Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: ".draggable .el-table__row", onEnd ({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); } }); }, // 列拖拽 columnDrop () { const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr'); this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.newList[evt.oldIndex]; this.newList.splice(evt.oldIndex, 1); this.newList.splice(evt.newIndex, 0, oldItem); } }); } } } </script> <style scoped> </style>

el-form 实现动态添加并实现校验 <template> <div class="app-container"> <el-form :model="environmentForm" ref="environmentForm"> <el-row :gutter="10" v-for="(item, index) in environmentForm.items" :key="item.key" > <el-col :span="6"> <el-form-item label="名称" :prop="'items.' + index + '.name'" :rules="rules.name" > <el-input v-model="item.name"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="变量" :prop="'items.' + index + '.variable'" :rules="rules.variable" > <el-input v-model="item.variable"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="描述" :prop="'items.' + index + '.description'" :rules="rules.description" > <el-input v-model="item.description"></el-input> </el-form-item> </el-col> <el-col :span="3" v-if="environmentForm.items.length !== 1" style="padding:40px;"> <el-button type="text" style="color: red" @click="removeEnvironmentForm(item)" >删除</el-button > </el-col> <el-col :span="3" style="padding:40px;"> <el-button type="text" @click="addEnvironmentForm" >添加</el-button> </el-col> </el-row> <el-form-item> <el-button type="primary" @click="submitForm('environmentForm')" >提交</el-button > <el-button @click="resetForm('environmentForm')">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data () { return { environmentForm: { items: [{ name: '', variable: '', description: '' }] }, rules: { name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], variable: [{ required: true, message: '变量不能为空', trigger: 'blur' }], description: [{ required: true, message: '描述不能为空', trigger: 'blur' }], } } }, methods: { //提交事件 submitForm (formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log('提交', this.environmentForm); alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, //重置事件 resetForm (formName) { this.$refs[formName].resetFields(); }, //移除表单项事件 removeEnvironmentForm (item) { var index = this.environmentForm.items.indexOf(item) if (index !== -1) { this.environmentForm.items.splice(index, 1) } }, //添加表单项事件 addEnvironmentForm () { this.environmentForm.items.push({ name: '', variable: '', description: '', key: Date.now() }); } } } </script>

el-table 动态增行通过dialog操作并将数据回显到table中 <template> <div class="app-container"> <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#3d80f2', color: '#fff', fontSize: '14px', height: '40px', }" > <el-table-column prop="numbering" label="编号" align="center" ></el-table-column> <el-table-column prop="title" label="标题" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.title" placeholder="请输入"></el-input> </template> </el-table-column> <el-table-column prop="type" label="类型" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.type" placeholder="请选择" clearable> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" ></el-option> </el-select> </template> </el-table-column> <el-table-column prop="sortName" label="分类" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.sortName" placeholder="分类" @focus="handleFocus(scope.$index,scope.row)" ></el-input> </template> </el-table-column> <el-table-column prop="status" label="状态" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.status"></el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="addClick">新增</el-button> <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)" >删除</el-button > </template> </el-table-column> </el-table> <el-dialog title="分类选择" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" append-to-body > <div> <h3>请选择分类:</h3> <el-checkbox-group v-model="checkList"> <el-checkbox v-for="item in orderList" :key="item.id" :label="item.id" >{{ item.label }}</el-checkbox > </el-checkbox-group> </div> <div> <h3>所属分类为：</h3> <span v-for="(item, index) in checkList" :key="index">{{orderObj[item]}} </span> </div> <span slot="footer" class="dialog-footer"> <el-button type="text" @click="handleClose">取消</el-button> <el-button type="primary" size="mini" @click="handleSubmit" >确定</el-button > </span> </el-dialog> </div> </template> <script> export default { data () { return { tableData: [ { numbering: "编号-1", title: "", type: '', sortName: '', sortList: '', status: true, } ], options: [ { id: 1, label: '类型1' }, { id: 2, label: '类型2' }, { id: 3, label: '类型3' } ], dialogVisible:false, index:null, checkList:[], checkOrder:[], orderList:[ { id:0, label:'shopping' }, { id:1, label:'singing' }, { id:2, label:'cooking' }, { id:3, label:'dancing' }, { id:4, label:'reading' } ], orderObj:['shopping','singing','cooking','dancing','reading'], checkAllList:[] } }, methods: { handleFocus (index,row) { this.index = index this.dialogVisible = true if (this.checkAllList[this.index] === undefined) { this.checkList = [] } else { this.checkList = this.checkAllList[this.index] } }, handleClose(){ this.checkOrder = [] this.dialogVisible = false }, handleSubmit(){ console.log('submit'); this.checkList.forEach(item => { this.checkOrder.push(this.orderObj[item]) }) this.checkAllList[this.index] = this.checkList this.tableData[this.index].sortList = this.checkList.join(',') this.tableData[this.index].sortName = this.checkOrder.join(',') this.dialogVisible = false this.checkOrder = [] }, //新增方法 addClick () { this.valNumer = this.valNumer + 1; var list = { numbering: "编号" + `-${this.tableData.length + 1}`, title: this.title, type: this.type, sortName: this.sortName, sortList: this.sortList, status: this.status }; this.tableData.push(list); }, //删除新增的某行数据 handleDelete (index, row) { this.tableData.splice(index, 1); for (var i = index; i < this.tableData.length; i++) {//从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据 this.tableData[i].numbering = "编号" + `-${Number(this.tableData[i].numbering.split("-")[1]) - 1}`; } } } }; </script> <style lang="scss" scoped> .dialogDiv { height: 300px; overflow: auto; } .el-checkbox{ margin: 0 10px 5px 10px; } </style>

v3实现table行的可选择展开

<el-table :data="roleList" :row-class-name="getRowClass" border> <el-table-column type="expand"> <template #default="props"> </template> </el-table-column> </el-table> const getRowClass = ({ row, rowIndex }) => { if (row.children.length == 0) { return 'row-expand-cover' } } /* css样式注意不要在scoped中修改；为了避免污染，最好利用deep穿透 */ <style> /* .row-expand-cover .el-table__expand-column .cell { display: none; } */ .row-expand-cover .el-table__expand-column .el-icon { visibility: hidden; } </style>