由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。

下面请看代码：

  <el-row>
        <el-row> 
          <el-col><span>可选择属性:</span></el-col>
          <el-col>
            <el-checkbox-group v-model="checkArr" size="medium">
                <el-col :span=12 v-for="item in optionalColumnList" :key="item.prop">
                    <el-row :gutter=20>
                      <el-col>
                        <el-col :span=2><el-checkbox :label="item.propName" @change="menuChange(item)" ></el-checkbox></el-col>
                      </el-col>   
                   </el-row>
                </el-col>
            </el-checkbox-group>
          </el-col>
        </el-row>
    </el-row>
 <el-table class="fixedtableHeight" v-loading="listLoading" ref="multipleTable" :data="showList" :header-cell-style="{background:'#96CDCD'}" stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
        <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop" align="center">
              <template slot-scope="scope">
                    <span>{{scope.row[scope.column.property]}}</span>
              </template>
          </el-table-column>
  </el-table>

数据结构必须如下：

  // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
      tableColumnList: [{prop: 'id', propName: '编号'},
                        {prop: 'name', propName: '名字'},
                        {prop: 'age', propName: '保质期'},
                        {prop: 'remark', propName: '特点'}],
      // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据
      dataList: [{'id': '100001','name': '小红萝卜','age': '2年','remark': '适合油炸','country': '中国','address': '广东省深圳市'},
                 {'id': '100002','name': '萝卜妹','age': '2年','remark': '适合水煮','country': '美国','address': '硅谷'},
                 {'id': '100003','name': '胖萝卜头','age': '1年','remark': '适合玩儿','country': '泰国','address': '清迈'},
                 {'id': '100004','name': '萝卜酱','age': '4年','remark': '适合吃火锅','country': '韩国','address': '首尔'}],

注意

动态表格与element一般表格在使用方法上的两个区别：

1、label与property的赋值方式
动态表格，表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的，后台返回的数据就是上面的tableColumnList。

通过 :label=“item.propName” 取得tableColumnList中的propName，也就是表头每一列的名字；
通过 :property=“item.prop” 取得tableColumnList中对象的prop，也就是后台实体类中的属性名，
2、属性和数据双向绑定方式,也就是 scope.row.*

通过 ** scope.row[scope.column.property]** 来获取每一个属性对应的数据， scope.column.property 中的property取的就是 :property=“item.prop” 中的值；

# vue.js # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue