Dust8 的博客

读书百遍其义自见

0%

vue与table

发表于 更新于

最近有个后台表格需要排序功能, 原生的感觉麻烦, 就选用了 Element 来做.

安装

由于只是一个页面,就选用了 cdn 的方式, 后期把 unpkg 的换成了 https://cdnjs.cloudflare.com, 因为 unpkg 慢而且还有频率限制.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

表格

需要用到的功能有多选, 排序, 固定表头,自定义列模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<el-table :data="predata" style="width: 100%" height="600"
    :default-sort="{prop: 'user_study_score', order: 'descending'}"
    @selection-change="handlePreSelectionChange">
    <el-table-column type="selection" width="45">
    </el-table-column>
    <el-table-column prop="pre_order_id" label="订单号" sortable width="100">
    </el-table-column>
    <el-table-column prop="weight" label="风险等级" sortable width="100" sortable>
        <template slot-scope="scope">
            <span :class=" scope.row.weight_class">{{ scope.row.weight }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="pre_mobile" label="预约人" width="120">
    </el-table-column>
    <el-table-column prop="pre_pay_time" label="预约时间" sortable>
    </el-table-column>
    <el-table-column prop="user_study_score" label="学分" sortable>
    </el-table-column>
    <el-table-column prop="pre_price" label="订单金额" sortable>
    </el-table-column>
</el-table>

重新渲染数据

有一列风险等级是从其他接口调用的, 然后把值设置为数据的属性, 但是数据回来了还是没有渲染回来, 需要特殊的设置方法.

1
2
3
element.weight_class = 'color_weight ' + class_name;
// 这样才能主动渲染数据新属性
this.$set(element, 'weight', res.weight)

参考链接