アイコン要素-UIテーブルをクリックして、トップ画面の詳細な説明文

 

<テンプレート> 
  <EL-テーブル：データ= "たtableData"スタイル= "幅：100％"> 
    <EL-テーブル列ラベル= "日期"幅= "180"> 
      <テンプレートスロットスコープ= "範囲"> 
        < Iクラス= "エル・アイコン・タイム"> </ I> 
        <スパンのスタイル= "マージン左：10pxの"> {{scope.row.date}} </ span>を
      </テンプレート> 
    </ EL-テーブル-コラム> 

    <エル・テーブルのカラムラベル= "姓名"幅= "240"スタイル= "DISPLY：フレックス"> 
      <テンプレートスロットスコープ= "スコープ"スタイル= "DISPLY：フレックス"> 
        <EL-ポップオーバーのトリガー=」 」配置= "トップ"スタイル= "幅クリックしてください：は50pxの"> 
          <P>名前：scope.row.name {{}} </ P> 
          <P>アドレス：{{scope.row.address}} </ P > 
          <P>アドレス：{{scope.row.address}} </ P > 
          <！ - <スパンスロット= "参照"スタイル= "幅は50px 「> {{scope.row.name}} </スパン> - > 
          < -以下のコメント、オープン上記のコメント,!表示されて行くことができますテキスト- > 
          <スパンスロット= "参考"スタイル= "幅：は50px"> 
            <IMGクラス= "アイコン-IMG" SRC = "../../資産/ IMG / card.png" /> 
          </ span>を
        </ EL-ポップオーバー> 

        <トリガー=ポップオーバー-EL "をクリックして"配置= "トップ"スタイル= "幅：は50px"> 
          <P>名前：{{scope.row.name}} </ P> 
          <P>住所：scope.row.address {{}} </ P> 
          <！ - <スパンスロット= "参考"スタイル= "幅：は50px"> scope.row.name {{}} </スパン> - >
          <！ -以下の注意、上のノートを開いて、それが表示テキストに可能である- > 
          <スパンスロット=「参考」スタイル=「幅：は50px」>
            <IMGクラス= "アイコン-IMG" SRC = "../../資産/ IMG / card.png" /> 
          </ span>の 
        </ EL-ポップオーバー>

        <エル・ポップオーバートリガー= "クリック"配置= "トップ"スタイル= "幅：は50px "> 
          <P>姓名：{{scope.row.name}} </ P> 
          <P>住址：{{scope.row.address}} </ P> 
          <スパンスロット="参照"スタイル="幅は50px "> {{scope.row.name}} </スパン> 
          < - <スパンスロット=！"参照"スタイル= "幅：は50px"> 
            <IMGクラス= "アイコン-IMG" SRC ="。 ./../assets/img/card.png」/> 
          </ span>を- > 
        </ EL-ポップオーバー> 
      </テンプレート> 
    </ EL-テーブル列> 

    <EL-テーブル列ラベル= "操作"> 
      <テンプレートスロットスコープ= "範囲">
        <EL-ボタンサイズ= "ミニ" @クリック= "handleEdit（スコープ。$インデックス、scope.row）">编辑</ EL-ボタン>@ =]をクリックし、 "handleEdit（スコープ。$インデックス、scope.row）">编辑</ EL-ボタン> 
        <EL-ボタンサイズ= "ミニ"タイプ= "危険" @ = "handleDelete（スコープをクリックします。$インデックス、スコープ.row） ">删除</ EL-ボタン>
      </テンプレート> 
    </ EL-テーブル列> 
  </ EL-テーブル> 
</テンプレート>

 

<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: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>
<style  scoped>
.icon-img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}
</style>