こんにちは、こんにちは、お久しぶりです。最近仕事で何か問題に遭遇しましたか? 最近、友人からタスクを頼まれました。エルテーブルで特定の行をクリックすると、その行のすべての情報がこの行の下に表示されます。どうすればよいですか? それを解決した後、公式ドキュメントほど単純ではなく、展開された行にEchartsのグラフを描画し、データをフォームに表示するだけでなければならないと彼は言いました。
そこで考えたのですが、まず第一に、el-table のいくつかの属性について話したいと思います。
row-key 属性: row-key は、この行のデータを識別するためのキーを指定します。これは、テーブルのレンダリングを最適化するために使用されます。
Expand-row-keys 属性:この属性を使用して、テーブルの現在の展開行を設定できます。これを使用するには、row-key 属性を設定する必要があります。この属性は、行を展開するためのキーの配列です。
Expand-change メソッド: このイベントは、ユーザーが行を展開または閉じるとトリガーされます。これは後で使用されます。この時点で展開された項目の配列が空の場合、現時点ではどの項目も展開されていないことを意味します。それ以外の場合は、展開された ID 項目を表示し、ID によってどの項目が展開されているかを確認します。
type="expand" : 設定すると expand 、展開可能なボタンとして表示されます。
さて、コードのテンプレート部分です。
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
@row-click="rowClick"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandChange"
ref="tableList"
>
<el-table-column type="expand">
<template slot-scope="props">
<div class="echarts" :id="props.row.id"></div>
</template>
</el-table-column>
<el-table-column label="第一年工资" prop="salary1"></el-table-column>
<el-table-column label="第二年工资" prop="salary2"></el-table-column>
<el-table-column label="第三年工资" prop="salary3"></el-table-column>
<el-table-column label="第四年工资" prop="salary4"></el-table-column>
<el-table-column label="第五年工资" prop="salary5"></el-table-column>
</el-table>
</div>
</template>次に、スクリプトのデータ部分があります。見てみましょう。
data() {
return {
tableData: [
{
id: "12987122",
salary1: 9,
salary2: 14,
salary3: 18,
salary4: 22,
salary5: 25,
},
{
id: "12987123",
salary1: 7,
salary2: 12,
salary3: 16,
salary4: 24,
salary5: 30,
},
{
id: "12987124",
salary1: 17,
salary2: 19,
salary3: 22,
salary4: 30,
salary5: 40,
},
{
id: "12987125",
salary1: 18,
salary2: 24,
salary3: 30,
salary4: 36,
salary5: 50,
},
],
expands: [],
};
},これがテーブルであり、各行がデータのセット (1 ～ 5 年の給与データを含む) であることを理解するのは難しくありません。ここで、この行をクリックすると下の echarts グラフを展開したいのですが、どうすればよいでしょうか? 最初はこう思ったのですが、各項目のチャートを初期化して以下に表示させれば切り替えで実現できます。それで試してみたところ、すぐに顔を平手打ちしました。最初に展開しないとdom要素が取得できないためです。
したがって、変更する方法は 1 つだけです。最初のコード: メソッド部分
methods: {
initChart(id) {
//找到这个id对应tableData中第几个
let index = this.tableData.map((item) => item.id).indexOf(id);
// console.log("index:", index);
//声明的dataArr数组，里面存的是这一行的salary1-salary5的数据
let dataArr = [];
dataArr.push(this.tableData[index].salary1);
dataArr.push(this.tableData[index].salary2);
dataArr.push(this.tableData[index].salary3);
dataArr.push(this.tableData[index].salary4);
dataArr.push(this.tableData[index].salary5);
//也可以循环
//console.log("dataArr:", dataArr);以第一个为例，就是[9,14,18,22,25] 用于后面echarts数据画图
//echarts画图
let mychart = this.$echarts.init(document.getElementById(id));
let option;
option = {
xAxis: {
type: "category",
data: ["第一年", "第二年", "第三年", "第四年", "第五年"],
},
yAxis: {
type: "value",
},
series: [
{
name: "显示数据",
data: dataArr,
type: "line",
smooth: true,
animationDuration: 2800,
animationEasing: "cubicInOut",
},
],
};
mychart.setOption(option);
},
rowClick(row) {
//点击行时展开收起
this.$refs.tableList.toggleRowExpansion(row);
},
expandChange(row, expandedRows) {
//查看此时的row和expandedRows
console.log("row:", row); //对象，包括id~salary5的所有值
console.log("expandedRows:", expandedRows); //展开的数组，由于后面的设置，这里长度最大为1.为1时说明刚刚展开了一个。为空说明刚刚取消展开了。
if (expandedRows.length) {
//说明此时是展开的
//找到这个row的id
let id = row.id;
//让所有项收起来，这是做成手风琴accordion的形式
this.expands = [];
//让刚刚展开的项放到expands数组中
if (row) {
this.expands.push(row.id);
}
//在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
this.$nextTick(() => {
//这个id对应上边的row.id
this.initChart(id);
});
} else {
//此时是收起
//收起所有
this.expands = [];
}
},
getRowKeys(row) {
//行数据的key，用于优化table的渲染
return row.id;
},
},それは一目瞭然ではないでしょうか。この時点で echart を描画するときは $nextTick を使用することを忘れないでください。その動作を覚えておいてください。次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。
行の展開と折りたたみを変更した場合に再度整理します。@expand-change : このときの関数の第二引数expandedRowsの長さを決定します。長さが0でない場合は、先ほど展開したことを意味しますので、展開されている場合は、一旦アイテムを全てしまってから、展開したアイテムを展開してください。クリックして展開した項目のみを保持します (Accordion の場合と同様)。次に、展開された項目の row.id を使用して echarts グラフを描画します。これははるかに明確ですか?
上の 2 つの画像はその例です。ぜひ試してみてください。コメント欄で議論してください。さようなら、また次回！