element表格嵌套select改变其他列的渲染数据，能否实现呢？

想实现的功能是，用户点击下拉框选择菜单，表格后面的列根据选择的数据渲染不同的值，想请教一下各位实现的思路！

回答

<!-- 测试 -->
<template>
        <el-table
            :data="tableData1"
            style="width: 100%">
            <el-table-column
                label="设备名称"
                width="180">
                <template>
                    <el-select v-model="value" placeholder="请选择" @change="test(value)">
                        <el-option
                        v-for="item in tableData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                prop="number"
                label="用户编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="username"
                label="用户姓名">
            </el-table-column>
            <el-table-column
                prop="parname"
                label="部门名称">
            </el-table-column>
            <el-table-column
                prop="startdate"
                label="授权起始时间">
            </el-table-column>
            <el-table-column
                prop="enddate"
                label="授权结束时间">
            </el-table-column>
        </el-table>
        </template>

<script>
export default {
    data(){
        return{
            arr:[{}],
            tableData: [{
                id:1,
                startdate: '2016-05-02',
                enddate:'2020-06-28',
                name: '华为',
                number:'4253125',
                username:'张三',
                parname: '人事部'
          }, {
                id:2,
                startdate: '2016-05-04',
                enddate:'2020-06-29',
                name: '小米',
                number:'2536125',
                username:'李四',
                parname: '技术部'
          }, {
                id:3,
                startdate: '2016-05-01',
                enddate:'2020-06-27',
                name: '苹果',
                number:'1256542',
                username:'王五',
                parname: '营销部'
          }, {
                id:4,
                startdate: '2016-05-03',
                enddate:'2020-06-26',
                name: '三星',
                number:'2564582',
                username:'郭涛',
                parname: '广告部'
          }],
          value: ''
        }
    },
    computed:{
        tableData1(){
            return this.arr
        }
    },
    methods:{
        test(value){
            this.arr = []
            this.tableData.map(item=>{
                if(item.id == value){
                    this.arr.push(item)
                    return
                }
            })
        }
    }
}
</script>

这个跟表格数据渲染一个数组一样吧 你只需要把对应的数据在select 改变的时候修改就好了

可以利用@visible-change通过find拿到选中项，在方法中赋值就行了

以上是 element表格嵌套select改变其他列的渲染数据，能否实现呢？ 的全部内容， 来源链接： utcz.com/a/27897.html

回到顶部